[CSS] 複数のbackground-imageの設定方法

マルチBackground-imageを使ってみる

CSS3では、背景画像を指定する際に複数の画像を指定出来るようになりました。

従来のCSSでは、一枚までしか指定が出来なかったので、無駄にdivなどのボックスを重ねて表現していました。

指定方法

方法は、至って簡単です。
画像を,（カンマ）区切りで指定するだけで大丈夫です。

注意する点としては、先に指定している画像が上になるということです。
これを覚えておかないと、上手に重ねる事ができません。

実際のサンプルソースが下記になります。

#box01{
 background-image:url(images/bg01.png),
                  url(images/bg02.png),
                  url(images/bg03.png);
 background-repeat:no-repeat,
                   repeat-x,
                   repeat-y;
 background-position:right top,
                     20px 0,
                     right;
 width:200px;
 height:200px;
}

画像の指定順と同様にrepeatとpositionも同じ順になります。
省略した場合、最初の指定が適用されます。

サンプルページを作ってみましたので、よかったら参考にしてみてください。
サンプルページ

bg01が黒丸、bg02が赤い四角、bg03が青い星となっています。
どの順番で重なっているか一目で分かると思います。

まとめ

CSSの複数background指定は、結構複雑なイメージがありますが、そんなことはありません。
ポイントさえ抑えておけば、とても有用なものです。

あまり深く考えずに、とりあえず使ってみるのが一番です。

ちなみに、対応ブラウザは、IE9〜とsafari、chrome、firefoxです。
IEだけは注意が必要です。