上部に固定ナビゲーション バーと、span12 にまたがる全幅の背景を持つコンテナーがあります。ただし、背景画像のコンテンツは、視覚的な合図のレイアウトにとって重要であるためです。ウィンドウサイズに関係なく常に画像全体を表示したい。
同じことを達成するために画像または画像のセットを構築する最良の方法はどれですか。
大型モニター
ミディアムモニター
小さいサイズ
画像の右側に表示されるフォームがあります。したがって、画像を機能させるのは少し難しいです。
上部に固定ナビゲーション バーと、span12 にまたがる全幅の背景を持つコンテナーがあります。ただし、背景画像のコンテンツは、視覚的な合図のレイアウトにとって重要であるためです。ウィンドウサイズに関係なく常に画像全体を表示したい。
同じことを達成するために画像または画像のセットを構築する最良の方法はどれですか。
大型モニター
ミディアムモニター
小さいサイズ
画像の右側に表示されるフォームがあります。したがって、画像を機能させるのは少し難しいです。
私の理解が正しければ、画像が到達できる最大サイズ (またはパーセンテージ) が必要です。背景画像の代わりに、次の<img>
ような要素を使用してみてください。
img{
max-width: 100%; /* or any other value */
height: auto;
}
cssを使用して背景画像を設定することを選択した理由はありますか?
#landing-page-bgdivを次のように変更した場合
<div id="landing-page-bg" style="background-image: none; width: auto; text-align: center;">
<img src="http://play.mink7.com/minkstock/images/landing_page_bg.jpg">
</div>
それはあなたが望む望ましい効果を生み出します(あなたが設定したいくつかの赤い背景を除いて)。
次に、画像にアイテムをオーバーレイする場合は、相対的なdivポジショニングを使用できます。
background: url(images/landing_page_bg.jpg) 77% 0 fixed no-repeat;
小さなメディアクエリのようなことをしてください。