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