CSS background url 背景画像を指定する

背景画像を指定するサンプルです。

目次 background urlを指定
背景画像を表示する
背景画像を繰り返さない(no-repeat)
スクロールしても背景は固定する(fixed)
2枚の画像を重ねて表示する
背景画像を上書きして画像なしにする(none)

background urlを指定

書き方 background : url ( 画像のURL )
background-image : url ( 画像のURL)
初期値 なし
継承 なし
備考 画像の表示は高さ(height)が必要
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/background

背景画像を表示する

urlの値はダブルコーテーションあり/なしどちらでも可能です。

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

 

背景画像を繰り返さない(no-repeat)

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

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

 

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

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

<style>
  .box1 {
    background: url(./img/test2.png) 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でスクロールとともに背景画像も移動します。

 

2枚の画像を重ねて表示する

カンマ区切りでつなげます。
引数の1つめの画像が前に、2つめの画像が後ろになります。
1つめの画像が2つめの画像より大きいと2つめの画像は表示されません。

<style>
  .box1 {
    background: url(./img/neko1.png), url("./img/test1.png");
  }
  div {
    width: 200px;
    height: 100px;
  }
</style>
<div class="box1">box1</div>
<div class="box2">box2</div>

 

背景画像を上書きして画像なしにする(none)

背景画像をなしにする場合noneで上書きします。

<style>
  .box1 {
    background: url(./img/test2.png);
  }
  div {
    width: 200px;
    height: 200px;
  }
  .box1{
    background:none;
  }
</style>
<div class="box1">box1</div>

関連の記事

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

△上に戻る