CSS background-image 背景画像を指定する

CSSのbackground-imageプロパティで、背景画像を指定するサンプルです。

目次

サンプル background-imageプロパティの仕様
  背景画像を表示する
  背景画像を繰り返さない
  スクロールしても背景は固定する

background-imageプロパティの仕様

background-image : url ( "値" )
background : url ( "値" )

background-imageプロパティは、背景画像を指定します。

説明
画像のURL 画像のURLを指定します。
値を継承しない

背景画像を表示する

背景画像を表示するサンプルです。

<style>
  .box1 {
    background-image: url(./images/test2.png);
  }
  .box2 {
    background: url(./images/test2.png);
  }
  div {
    width: 200px;
    height: 100px;
  }
</style>
<div class="box1">box1</div>
<div class="box2">box2</div>

3行目は、background-imageプロパティを使用しています。
6行目のようにbackgroundプロパティでも表示できます。

背景画像を繰り返さない

背景画像を繰り返さない場合は、background-repeatのno-repeatを指定します。

<style>
  .box1 {
    background-image: url(./images/test2.png);
    background-repeat: no-repeat;
  }
  div {
    width: 300px;
    height: 300px;
  }
</style>
<div class="box1">box1</div>

4行目は、no-repeatを指定しています。

スクロールしても背景は固定する

スクロールしても背景は固定する場合は、background-attachmentのfixedを指定します。

<style>
  .box1 {
    background-image: url(./images/test2.png);
    background-attachment: fixed;
  }
  div {
    width: 300px;
  }
</style>
<div class="box1">box1
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>b</p>
</div>

4行目は、fixedを指定しているので画面をスクロールしても背景画像は移動しません。
デフォルトはscrollでスクロールとともに背景画像も移動します。

関連の記事

CSS background 背景色を指定するサンプル
CSS background-repeat 背景画像の繰り返しを指定

△上に戻る