以前、背景全体に画像を表示させることができるjQueryプラグイン「MaxImage2」を紹介しましたが、スクリプトを使用せずにCSSだけで画面いっぱいに背景画像を表示する方法を紹介いたします。
CSSだけで画面いっぱいに背景画像を表示する方法
CSSだけで画面いっぱいに背景画像を表示するには、以下のようにスタイルを指定します。
1 2 3 4 | body{ background: url(background.jpg) no-repeat center center; background-size: cover;} |
たった2行で画像を背景全体に表示させることができます。
背景画像が画面全体に表示されない場合
上記でうまくいかない場合は、以下のような方法もありますので、お試しください。
1 2 3 4 5 6 | <body> <img class="bg" src="background.jpg" /> <div id="container"> コンテンツ </div></body> |
HTML側で<body>直下に画像をマークアップして、
01 02 03 04 05 06 07 08 09 10 11 12 13 | img.bg { min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0;}div#container { position: relative;} |
CSS側で調整します。
あとがき
最近は背景全体に画像を表示させているサイトも増えていて、トレンドになっていますね。
大胆に背景画像を配置したオシャレなサイトを作りたい時は、ぜひお試しください。