ウェブサイトを制作している時、背景に色を付けるのは、background-colorでスタイルを指定します。

では、背景に画像を指定したい場合は、どうすればいいのでしょうか。

今回は、背景に画像を設定する方法を紹介します。

基本のコードは、以下になります。

<div class="container">
  <div class="text">
    <p>いろんな背景画像</p>
  </div>
</div>
.container {
  height: 450px;
  border: 1px solid #000;
}

.text {
  font-size: 24px;
}

image2

1.背景を画像にする

背景を画像にするには、background-imageで画像を指定します。

.container {
  height: 450px;
  border: 1px solid #000;
  background-image: url("./images/lake.jpg");
}

url は、css のファイルから見た相対パス、もしくは絶対パスで画像の場所を指定します。

ブラウザで確認すると、

image3

背景に画像が設定されました。

2.画像のサイズを指定する

本来は湖の画像なのですが、このままでは空だけの表示になってしまっています。

画像のサイズを指定するには、background-sizeを使います。

今回は、background-size: cover;を設定してみましょう。

.container {
  height: 450px;
  border: 1px solid #000;
  background-image: url("./images/lake.jpg");
  background-size: cover;
}

ブラウザで確認すると、

image4

空だけではなく、山も見えてきました。

background-sizeは、他にも

内容
auto縦横比を維持する。初期値。
contain画像が全て見えるようにする。画像は繰り返される。
cover画像が全体をカバーできるようにする。画像は切り取られる。

があります。

数値も指定できます。

3.画像の位置を調整する

では、湖も見えるようにしていきます。

画像の位置を調整する場合は、background-positionを指定します。

今回は、background-position: center;を設定します。

.container {
  height: 450px;
  border: 1px solid #000;
  background-image: url("./images/lake.jpg");
  background-size: cover;
  background-position: center;
}

ブラウザで確認すると、

image5

湖が出てきました。

設定は他にも、top や bottom、left や right で指定できたり、具体的な値で指定できたりすることができます。

4.繰り返して画像を表示する

例えば、以下の画像を背景として並べたい場合は、background-repeatを使います。

image6

画像を横に並べたい場合は、background-repeat: repeat-x;を指定します。

.container {
  height: 450px;
  border: 1px solid #000;
  background-image: url("./images/lemon.jpg");
  background-repeat: repeat-x;
}

ブラウザで確認すると、

image7

画像が横いっぱいに並びました。

background-repeatは他にも、

内容
repeat指定した画面を全て覆うまで、画像が繰り返される。初期値。
no-repeat画像は繰り返されない。
repeat-x画像が横方向いっぱいまで繰り返される。
repeat-y画像が縦方向いっぱいまで繰り返される。

があります。

ウェブサイトの見栄えが良くなりますので、ぜひ試してみてください。

ブログ一覧