Webデザインレシピ » Blog Archive » Perfect Full Page Background Image with CSS

CSS のみで画面いっぱいに背景画像 スクリプトを使わずに、CSSのみで画面いっぱいに背景画像を表示しています。 実際の画像のサイズは 800 x 533 ピクセルですが、画面いっぱいに拡大表示されていると思います。 拡大しているので、当然画像はぼやけて表示されますが、元画像のサイズを大きくすれば軽減されます。画像の縦横比は維持されるので、ディスプレイの大きさによって変形する事はありません。 背景画像に position: fixed を指定すると、画像はページの中央に固定表示されるので、コンテンツが縦に長くなって、縦スクロールしても固定されたままになります。 position: absolute を指定すれば、スクロールと共に背景も一緒にスクロールしますが、その場合は画像の下端に注意する必要があります。 動作確認済みブラウザ Firefox 3.6 Safari 5 Chrome 5 O

[oicha]

背景を固定して、特定のエリアをスクロール表示させるTips

[easygoing247]

背景に画像を画面いっぱいに表示させる方法　cssのみ