[CSS]backgroundプロパティを使って背景画像を複数設置する方法と注意点など

当サイトではアフィリエイト広告を利用しています。

CSSのbackgroundプロパティでは背景画像を複数設置することが可能になっています。これを使うとHTMLをゴチャゴチャやらなくても四隅に別々の画像を配置するなど簡単にできるようになります（古いブラウザでは対応していないものがあるので注意は必要です）。

CSSが得意な人にとっては基本中の基本かもしれませんが、自分の周り（主に仕事関係）の中でも知らない人も多くいましたし何よりも自分で作る度に迷ってしまうので、やり方と注意点をまとめておきたいと思います。

backgroundプロパティの記述方法

まずは基本となるbackgroundプロパティの記述方法からですが、これは比較的簡単でこんな感じでOKです。

[php].sample{
background: url(./images/no1.png),url(./images/no2.png),url(./images/no3.png),url(./images/no4.png);
}[/php]

要はurlを「,」で区切って並べる、ただそれだけです。

ただこれだけだと位置が確定しないので、四隅に配置するとしたらこんな感じになります。

[php].sample{
background: url(./images/no1.png) left top no-repeat,url(./images/no2.png) right top no-repeat,url(./images/no3.png) right bottom no-repeat,url(./images/no4.png) left bottom no-repeat;
}[/php]

画像が重なれなければ順番はどうでもいいのですが、CSSの値の指定で省略した場合の順番が［上］［右］［下］［左］になっているので、それに合わせて記述するようにしています（画像を重ねる場合はこの後で説明します）。

＜サンプル＞
上記の記述で書くとこんな感じになります（画像のパス、ボックスのサイズ指定などの関係で若干違いはあります）

＜補足＞
画像は「background-imageプロパティ」でも設定できますが「背景画像の位置」も決める関係もあって、包括的に使える「backgroundプロパティ」を使っています。

背景画像を重ねるときのルールと注意点

四隅に配置する方法を先に説明しましたが、デザイン的な関係で背景画像を重ねることもあると思います（ベースにテクスチャを敷いた上にアイコンを載せるようなやり方）。

この時に重要になってくるのが「画像の重なりの順番（＝ルール）」だと思いますが、そのルールがこちら
左に書いたものが上になる
たったこれだけです（そんなに複雑なコントロールができるとも思えませんけど^^）。

したがって、テクスチャをベースに敷き、その上にアイコンを載せるような場合は「アイコン」「テクスチャ」の順に書く必要があります。

透過した画像を使って微妙な風合いを出す場合は技と上下を逆にするなどのテクニックも使えますけど、これはかなりの高等テクニックになるので、あまりオススメはしません（やり方次第で色々と考えられますけどね）。

をしっかりと理解していないと思った通りの配置になってくれません。

ということでこちらもサンプルを用意してみました。
使うのはこの2つの画像（上下がわかりやすくするため、テクスチャを半透明にしてあります）

CSSソース
[php].sample{
background: url(./images/back.png) left top ,url(./images/yajirushi.gif) left top no-repeat;
}[/php]

CSSソース
[php].sample{
background: url(./images/yajirushi.gif) left top no-repeat,url(./images/back.png) left top ;
}[/php]

背景用画像を後にしたほうが矢印の画像が鮮明になっているのがわかると思います。
ちなみに、これは画像の数が３つ、４つになっても条件はおなじになります。

応用編としては、こういった感じでテクスチャの上に紙をめくったようなものを追加することもできます。

＜注意点＞
前にも書いていますが、今回紹介した方法ブラウザのバージョンによっては対応していません。具体的には以下のバージョンはNGなので、対象としている場合は背景の色を指定するなど対策が必要になります。

・非対応ブラウザ
　Firefox 1～Firefox 3.5 ⋮
　Internet Explorer 6～Internet Explorer 8
　Opera 8～Opera 10
　Safari 1 and Safari 1.2

背景画像を上手く使うことでサイトデザインの幅も広がってくると思うので、今まで画像で苦労していた人は是非試してみてはいかがでしょうか。