CSS多重背景

この章では、要素に複数の背景画像を追加する方法を学びます。

以下の属性も学びます：

  • background-size
  • background-origin
  • background-clip

CSS多重背景

CSSを使って background-image 属性は、要素に複数の背景画像を追加するために使用されます。

異なる背景画像はカンマで区切られ、互いに重なります。その中で、最初の画像が観覧者に最も近づいています。

以下の例では、2枚の背景画像があります。第一枚の画像は花（底と右側に並べます）で、第二枚の画像は紙の背景（左上角に並べます）：

例

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

実際に試してみてください

多重背景画像は、単独の背景属性（以下に述べるように）または background 簡略属性を使って指定します。

以下の例では、 background 簡略属性（結果与上例相同）：

例

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

実際に試してみてください

CSS 背景サイズ

CSS background-size 属性は、背景画像のサイズを指定することができます。

背景画像のサイズを指定するには、長さ、パーセンテージ、または以下の2つのキーワードのいずれかを使用できます：contain または cover。

以下の例では、背景画像のサイズを元の画像よりはるかに小さく調整しています（ピクセルを使用）：

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

これはコードです：

例

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

実際に試してみてください

background-size の他の2つの可能な値は、 contain および cover。

contain キーワードは、背景画像を可能な限り大きなサイズに拡大しますが、幅と高さは必ず内容エリアに適合する必要があります。したがって、背景画像と背景位置エリアの比率によって、背景画像で覆われていない背景エリアが存在する可能性があります。

cover キーワードは、背景画像を拡大して、内容エリアが完全に背景画像で覆われるようにします（幅と高さが内容エリアと同じかそれ以上です）。この場合、背景画像の一部が背景位置エリア内で見えなくなることがあります。

以下の例示では、以下のものを示しています contain および cover の用法：

例

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

実際に試してみてください

複数の背景画像のサイズを定義します

多重背景を処理する際には、background-size 属性は、複数の背景サイズの設定値を受け入れます（カンマで区切られたリストを使用）。

以下の例では、3枚の背景画像が指定されており、各画像には異なる background-size 値が設定されています：

例

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat; 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

実際に試してみてください

全サイズ背景画像

今、ウェブサイト上の背景画像は常にブラウザのウィンドウ全体を覆うようにしたいです。

具体的な要件は以下の通りです：

  • 画像でページ全体を埋める（余白なし）
  • 必要に応じて画像を拡大する
  • ページ上で画像を中央に配置する
  • スクロールバーを発生させない

以下の例示では、以下のように実現する方法を示します：<html>要素（<html>要素は常に少なくともブラウザのウィンドウの高さです）を使用して、それに固定で中央に配置された背景を設定します。最後に、background-size属性を使用してサイズを調整します：

例

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

実際に試してみてください

Hero Image

また、<div>に異なる背景属性を使用してHero Image（テキストを含む大きな画像）を作成し、それを希望する位置に配置することができます。

例

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

実際に試してみてください

CSS background-origin 属性

CSS background-origin 属性は背景画像の位置を指定します。

この属性は3つの異なる値を受け入れます：

  • border-box - 背景画像はボーダーの左上隅から始まる
  • padding-box - 背景画像はパディングの外縁の左上隅から始まる（デフォルト）
  • content-box - 背景画像は内容の左上隅から始まる

以下の例示では、以下のものを示しています background-origin 属性：

例

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

実際に試してみてください

CSS background-clip 属性

CSS background-clip 属性は背景の描画エリアを指定します。

この属性は3つの異なる値を受け入れます：

  • border-box - 背景をボーダーの外縁に描画（デフォルト）
  • padding-box - 背景をパディングの外縁に描画
  • content-box - 背景を内容エリアに描画

以下の例示では、以下のものを示しています background-clip 属性：

例

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

実際に試してみてください

CSS 高级背景属性

属性 説明
background すべての背景属性を1つの宣言で設定するために使用されるショートカット属性です。
background-clip 背景の描画エリアを指定します。
background-image 要素に1枚または複数の背景画像を指定します。
background-origin 背景画像の配置位置を指定します。
background-size 背景画像のサイズを指定します。