CSSのbackground-imageの書き方

CSS SCSS

CSSのbackground-imageの書き方

CSSでbackground-imageプロパティを使用して、要素の背景に画像を設定する方法について説明します。
background-imageは、指定した画像を背景として要素に適用するためのプロパティです。

基本的な書き方

background-imageプロパティは、以下のように書きます。

.test-element {
  background-image: url('path/to/image.jpg');
}

この例では、.test-elementクラスを持つ要素の背景に、path/to/image.jpgという画像が設定されます。
url()関数の中には、画像ファイルのパスを指定します。
このパスは、相対パスまたは絶対パスで指定できます。

画像のサイズ調整

画像が要素に適切にフィットするようにするためには、background-sizeプロパティを使用します。
主な値には次のようなものがあります。

  • cover：要素全体をカバーするように画像を拡大または縮小します。

画像のアスペクト比は保たれますが、要素に完全に合わせるために画像の一部が切り取られる可能性があります。

  • contain：要素内に収まるように画像を拡大または縮小します。

画像のアスペクト比は保たれ、要素内に完全に収まりますが、要素の一部が空白になることがあります。

  • 特定のサイズ：width height形式で、例えばbackground-size: 100px 200px;のように設定できます。

画像の繰り返し

background-repeatプロパティを使用して、背景画像が要素内でどのように繰り返されるかを指定できます。
主な値には次のようなものがあります。

  • repeat：画像が水平および垂直方向に繰り返されます。
  • repeat-x：画像が水平方向にのみ繰り返されます。
  • repeat-y：画像が垂直方向にのみ繰り返されます。
  • no-repeat：画像は繰り返されず、一度だけ表示されます。

画像の位置指定

background-positionプロパティを使って、背景画像の位置を指定できます。
主な値には次のようなものがあります。

  • top left：画像を要素の左上に配置します。
  • center center：画像を要素の中央に配置します。
  • bottom right：画像を要素の右下に配置します。
  • パーセンテージやピクセル単位の値も指定できます（例えば、background-position: 50% 50%;）。

画像の固定

background-attachmentプロパティを使用すると、背景画像がスクロールするか、固定されるかを指定できます。
主な値には次のようなものがあります。

  • scroll：背景画像はコンテンツと一緒にスクロールします（デフォルトの値）。
  • fixed：背景画像はビューポートに対して固定され、スクロールしても動きません。
  • local：背景画像は要素のコンテンツのスクロールに合わせてスクロールします。

例

以下に、これらのプロパティを組み合わせた例を示します。

.test-background {
  background-image: url('path/to/image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

この例では、.test-backgroundクラスを持つ要素に対して、path/to/image.jpgという画像を背景に設定し、画像を要素全体に合わせてカバーし、繰り返さず、中央に配置し、スクロールしても画像が固定されるように設定しています。

背景画像をbackgroundプロパティで指定する方法

背景画像をbackgroundプロパティを使って、繰り返し、位置などを一度に設定することができます。

/* 複数のプロパティを指定する例 */
.element {
  background: url('path/to/image.jpg') no-repeat center center / cover;
  /* no-repeat: 画像を繰り返さない
     center center: 画像の位置を中央に
     / cover: 画像を要素のサイズに合わせて拡大・縮小 */
}

各値の意味:

  • url('path/to/image.jpg'): 画像ファイルのパスを指定
  • no-repeat: 画像を繰り返さない設定
  • center center: 背景画像を水平・垂直方向の中央に配置
  • cover: 画像を要素のサイズに合わせて拡大・縮小し、要素全体を覆う

また、backgroundプロパティは複数の背景をカンマで区切って指定することもできます。

/* 複数の背景画像を重ねて表示する */
.element {
  background: url('image1.jpg') no-repeat center center / cover,
              url('image2.png') repeat-x bottom / 100px 100px;
}

このように、画像の位置やサイズ、繰り返しの指定を柔軟にコントロールできます。