CSS での複数の背景の利用方法

CSS3 より、要素に複数の背景を適用できるようになりました。複数の背景は、最初に指定した背景が最前面、最後に指定した背景が最も奥のレイヤーになるように、重ねて描画されます。

複数の背景は、以下の様に各レイヤーをカンマで区切る事だけの簡単な構文で記述可能です。

.myclass {
  background: 背景1, 背景2, ..., 背景N;
}

この方法は、ショートハンドプロパティの background でも、個別のプロパティ（※background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size） のどちらでも利用可能です。

例

次の例では、上位レイヤーから

1. Firefox のロゴ
2. 線形グラデーション
3. 花の画像

の順で、3 つの背景が重ねられています。記述量が多くなる場合は、例の様にカンマ毎に改行するとコードが読みやすくなるかもしれません。

.multi_bg_example {
  background-image:
    url("https://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png"), /* 最前面の背景レイヤーの背景画像 */
    linear-gradient( to right, rgba(255,255,255,0),  #fff ),
    url("https://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg");

  background-repeat:
    no-repeat, /* 最前面の背景レイヤーに対応 */
	no-repeat,
	repeat;

  background-position:
    bottom right, /* 最前面の背景レイヤーに対応 */
	left,
	right;
}

スクリーンショット

スクリーンショットで表示されているとおり、最初に記述した Firefox のアイコン画像が最前面、次にグラデーション、最後に花の画像が重ねて描画されます。 background-repeat と background-position に指定した複数の値は、それぞれ background-image で記述した各値に対し、同じ順番で適用されます。つまり、background-image の最初の値として指定した FireFox のアイコンの画像に対し、
background-repeat は "bottom left"、
background-position は "no-repeat"
が適用され、その結果、Firefox のアイコンの画像は、最前面のレイヤーの右下に、ひとつだけ 表示されるのです。

関連記事

• グラデーションの利用