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

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

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

以前、背景全体に画像を表示させることができる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側で調整します。

あとがき

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

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

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

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です