画面いっぱいに背景画像を表示させる際に注意しなければいけないのが、異なるサイズのディスプレイで見た時に画像が切れたり、リピートされてしまわないようにする事です。
今回は「background-size：cover」を使い、異なるサイズのディスプレイで見た時でも画面いっぱいに背景画像がしっかり表示させるようにします。
また、中身のコンテンツが多く、下にスクロールした場合でも画面いっぱいに背景画像がしっかり表示させるように、「background-attachment: fixed」も加えて使用しています。
index.html
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <style> body, div, h1 { margin: 0; padding: 0; } body { background-image: url(bg2.jpg); /* 画像を常に天地左右の中央に配置 */ background-position: center center; /* 画像を繰り返し表示しない */ background-repeat: no-repeat; /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */ background-attachment: fixed; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */ background-size: cover; /* 背景画像が読み込まれる前に表示される背景のカラー */ background-color: #464646; } #box { margin: 50px auto 0; width: 800px; height: 2000px; background-color: rgba(255,255,255,0.4); border-radius: 5px; } h1 { padding: 10px; } </style> </head> <body> </body> </html>
