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

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

background urlを指定

backgroundとurlのセットで背景画像を指定できます。

background : url ( 画像のURL )

background-image : url ( 画像のURL)

画像の表示は高さ(height)が必要です。

背景画像を表示する

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)

既にあるbackgroundの背景画像に対してbackground:noneで上書きして消せます。

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