背景に複数の背景画像（background-image）を配置したいと思うことは多々あると思います。もし、これが複数の要素で入れ子になっている場合であればそれぞれの要素に一つずつ背景画像（background-image）を入れていけばいいのですが、そうでない場合、一つの要素に複数の背景画像（background-image）を設置できたら問題は解決しますよね。
実はこれ、できるんです！ css3から、一つの要素に複数背景画像（background-image）を設置することが可能になりました。そこで、今回は一つの要素に複数の背景画像（background-image）を設置する方法をご紹介します。やり方は簡単なので、この記事を見ていただければすぐ実践に活かせるかと思います。
私のように、ほぼ毎日コーディングにかかわる仕事に携わっている身からすれば、「これができるようになって、ほんと便利になった！」と感じるスキルです。是非習得していってください。
一つの要素に複数背景画像（background-image）を設置する方法
一つの要素に複数背景画像（background-image）を設置する場合は、下記のように「 , 」で区切るだけで配置できます。
background-image:背景画像1,背景画像2,背景画像3;
}
画像の重なりの順番は、最初に記載した画像が最前面に、最後に記載した画像が最背面に順に重なって表示されます。
background-image以外のプロパティもbackground-imageと同様に「 , 」で区切るだけで配置できます。それぞれのプロパティで「 , 」区切りで指定された値は、それぞれ同じ順番で適応されます。
※background-colorだけ例外で「 , 」区切りの指定はできません。
文章の説明だけではわかりづらいと思うので、サンプルを示してみます。
|
1 2 3 4 5 |
.sample1{ background-image:url(logo.gif) , url(haikei.gif); background-position:center center , 0 0; background-repeat:no-repeat , repeat; } |
結果
ロゴ（logo.gif）は background-position center center で真ん中に、background-repeat no-repeat で繰り返しなしで表示。その後ろに背景パターン(haikei.gif)が background-position 0 0 のbackground-repeat repeat 繰り返しで表示されました。
linear-gradient()関数などで指定されたグラデーションも画像同様複数指定可能です
linear-gradient()関数、radial-gradient()関数 、repeating-linear-gradient()関数 、repeating-radial-gradient()関数 などで指定されたグラデーションも画像を扱うような形で複数指定が可能です。もちろん画像とグラデーションを組み合わせた指定も可能です。この設置方法についてはlinear-gradient()についての記事の中の「複数のグラデーションや画像を重ねることもできます。」で扱ってますので是非確認してみて下さい。
