背景を複数指定 Multiple backgrounds

背景の複数指定について

backgroundやbackground-imageプロパティなどで指定する値について、カンマで区切って指定することにより、1つの要素に対して複数の背景を指定することができます。
優先順位は、後に指定すればするほど低くなります（逆に前に指定すればするほど高くなります）。

なお、グラデーションなどベンダープレフィックスが必要な値が含まれる場合は、その分プロパティを分けて指定する必要があります。

【構文】

							background:指定値1, 指定値2, ...;

【サンプル】

div.sample {
								background:
									url("img/multiple-backgrounds1.gif") no-repeat, /* 最前面 */
									url("img/multiple-backgrounds2.gif") no-repeat 100% 0,
									url("img/multiple-backgrounds3.gif") no-repeat 0 100%,
									url("img/multiple-backgrounds4.gif") no-repeat 100% 100%,
									linear-gradient(top, #f00, #00f); /* 最背面 */

/* ベンダープレフィックスが必要な場合はその分プロパティを分けて指定 */
								/*
								-webkit-background:
									url("img/multiple-backgrounds1.gif") no-repeat,
									url("img/multiple-backgrounds2.gif") no-repeat 100% 0,
									url("img/multiple-backgrounds3.gif") no-repeat 0 100%,
									url("img/multiple-backgrounds4.gif") no-repeat 100% 100%,
									-webkit-linear-gradient(top, #f00, #00f);
								-moz-background:
									url("img/multiple-backgrounds1.gif") no-repeat,
									url("img/multiple-backgrounds2.gif") no-repeat 100% 0,
									url("img/multiple-backgrounds3.gif") no-repeat 0 100%,
									url("img/multiple-backgrounds4.gif") no-repeat 100% 100%,
									-moz-linear-gradient(top, #f00, #00f);
								*/
							}

背景に関するプロパティを分けて指定する場合

background-imageやbackground-repeatなどのプロパティについても、カンマ区切りで指定することで複数の指定が可能です。

CSS3逆引きリファレンス一覧へ戻る