CSS プロパティ background-image

CSS background-image 属性详解：網頁に豊かな背景画像を追加する

CSS background-image 属性详解：網頁に豊かな背景画像を追加する

CSSの `background-image` プロパティについて深く掘り下げ、Webページの要素に1つまたは複数の背景画像を追加する方法を学びます。背景画像の配置、繰り返し方法、サイズ調整などのテクニックを習得し、より魅力的なWebデザインを実現しましょう。

background-image 属性の基本

定義と構文

`background-image` プロパティは、要素に背景画像を設定するために使用します。構文は以下の通りです。


background-image: url("画像のURL");

例えば、`sample.jpg` という画像を背景に設定する場合、以下のように記述します。


background-image: url("sample.jpg");

対応している画像フォーマット

`background-image` プロパティでは、以下の一般的な画像フォーマットがサポートされています。

  • JPEG (.jpg, .jpeg)
  • PNG (.png)
  • GIF (.gif)
  • SVG (.svg)

デフォルト値

`background-image` プロパティのデフォルト値は `none` です。これは、背景画像が設定されていないことを意味します。

背景画像の繰り返し方法を制御する (background-repeat)

`background-repeat` プロパティを使用すると、背景画像の繰り返し方法を制御できます。

属性値

値 説明
repeat デフォルト値。背景画像は水平方向と垂直方向にタイル状に繰り返されます。
repeat-x 背景画像は水平方向にのみ繰り返されます。
repeat-y 背景画像は垂直方向にのみ繰り返されます。
no-repeat 背景画像は繰り返されず、1回だけ表示されます。
space 背景画像は水平方向と垂直方向にタイル状に繰り返されますが、画像間に空白が追加されます。
round 背景画像は水平方向と垂直方向にタイル状に繰り返されますが、画像のサイズが調整されて、要素全体を覆うように配置されます。

コード例


.example1 {
  background-image: url("sample.jpg");
  background-repeat: repeat; /* デフォルト */
}

.example2 {
  background-image: url("sample.jpg");
  background-repeat: repeat-x;
}

.example3 {
  background-image: url("sample.jpg");
  background-repeat: no-repeat;
}

背景画像の位置を設定する (background-position)

`background-position` プロパティを使用すると、背景画像の位置を指定できます。

属性値

`background-position` プロパティでは、以下の値を指定できます。

  • キーワード: top, bottom, left, right, center
  • パーセント値: 要素の幅と高さに対するパーセンテージ
  • 長さ: px, em などの単位で指定

コード例


.example1 {
  background-image: url("sample.jpg");
  background-repeat: no-repeat;
  background-position: top left;
}

.example2 {
  background-image: url("sample.jpg");
  background-repeat: no-repeat;
  background-position: 50% 50%; /* 中央に配置 */
}

.example3 {
  background-image: url("sample.jpg");
  background-repeat: no-repeat;
  background-position: 10px 20px;
}

背景画像のサイズを制御する (background-size)

`background-size` プロパティを使用すると、背景画像のサイズを制御できます。

属性値

値 説明
cover 背景画像は、アスペクト比を維持したまま、要素全体を覆うように拡大縮小されます。
contain 背景画像は、アスペクト比を維持したまま、要素内に収まるように拡大縮小されます。
auto デフォルト値。背景画像は、元のサイズで表示されます。
長さ px, em などの単位で、背景画像の幅と高さを指定できます。
パーセント値 要素の幅と高さに対するパーセンテージで、背景画像の幅と高さを指定できます。

コード例


.example1 {
  background-image: url("sample.jpg");
  background-size: cover;
}

.example2 {
  background-image: url("sample.jpg");
  background-size: contain;
}

.example3 {
  background-image: url("sample.jpg");
  background-size: 200px 100px;
}

複数の背景画像を使用する

`background-image` プロパティでは、カンマ区切りで複数の値を指定することで、複数の背景画像を設定できます。画像の表示順序は、指定した順序になります（最初に指定した画像が最前面に表示されます）。

構文


background-image: url("画像1のURL"), url("画像2のURL"), url("画像3のURL");

画像の重ね順

複数の背景画像を設定した場合、後に指定した画像が上に重なります。重ね順を変更する場合は、`z-index` プロパティを使用します。

コード例


.example {
  background-image: url("image1.jpg"), url("image2.png");
  background-repeat: no-repeat, repeat-x;
  background-position: top left, bottom right;
}

その他の background プロパティとの併用

`background-image` プロパティは、他の `background-*` プロパティと組み合わせて使用することで、より複雑な背景効果を実現できます。

background-attachment

`background-attachment` プロパティは、スクロール時に背景画像を固定するかどうかを指定します。

background-clip

`background-clip` プロパティは、背景画像の描画範囲を指定します。

background-origin

`background-origin` プロパティは、背景画像の配置基準点を指定します。

background

`background` プロパティは、`background-image`, `background-repeat`, `background-position`, `background-size`, `background-color` などのプロパティをまとめて指定するための省略形です。

コード例


.example {
  background: url("sample.jpg") no-repeat center center / cover fixed;
}

関連するQA

  1. Q: `background-image` プロパティで設定した画像が表示されません。
    A: 画像のパスが正しいか、ファイルが存在するかを確認してください。また、要素に幅と高さが設定されているかも確認してください。
  2. Q: 背景画像を要素の中央に配置するにはどうすればよいですか？
    A: `background-position: center center;` を指定してください。
  3. Q: 背景画像をレスポンシブ対応にするにはどうすればよいですか？
    A: メディアクエリを使用し、画面サイズに合わせて `background-image`, `background-size`, `background-position` などの値を変更します。