CSS3では背景画像を複数重ねて指定・表示できる

harada 4,576views 更新:2015年10月28日

CSS3ではひとつの要素に対して複数の背景画像を重ねて表示できるようです。
左側に記述したものが上になる ので、記述順番に注意すれば簡単に実行できますね!

記述例

div {
background: url(img/bg_bottom.gif) left bottom no-repeat, url(img/bg_top.gif) left top no-repeat,url(img/bg.gif) left top repeat;
}

この場合img/bg.gifが一番下のレイヤーになり、上にimg/bg_top.gif、さらに上にimg/bg_bottom.gifが重なって表示されるようになります。

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

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません