CSSだけで画面いっぱいに背景画像を表示する方法

CSSだけで画面いっぱいに背景画像を表示する方法

CSSだけで画面いっぱいに背景画像を表示する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加

以前、背景全体に画像を表示させることができるjQueryプラグイン「MaxImage2」を紹介しましたが、スクリプトを使用せずにCSSだけで画面いっぱいに背景画像を表示する方法を紹介いたします。

スポンサードリンク

CSSだけで画面いっぱいに背景画像を表示する方法

CSSだけで画面いっぱいに背景画像を表示するには、以下のようにスタイルを指定します。

style.css
body{
background: url(background.jpg) no-repeat center center;
background-size: cover;
}

たった2行で画像を背景全体に表示させることができます。

背景画像が画面全体に表示されない場合

上記でうまくいかない場合は、以下のような方法もありますので、お試しください。

HTML
<body>
<img class="bg" src="background.jpg" />
<div id="container">
コンテンツ
</div>
</body>

HTML側で<body>直下に画像をマークアップして、

CSS
img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
div#container {
position: relative;
}

CSS側で調整します。

あとがき

最近は背景全体に画像を表示させているサイトも増えていて、トレンドになっていますね。

大胆に背景画像を配置したオシャレなサイトを作りたい時は、ぜひお試しください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。