by shigemk2

当面は技術的なことしか書かない

一つのCSSに背景画像を複数設定する

CSS3で一つのCSSに背景画像を複数設定する

ひとつのCSSに複数の画像を設定することが出来ます。
コンマ区切りでそれぞれの画像の位置やリピート、サイズを別々に指定することも出来ます。
なお、先に書いた方が上に表示されます。

background-image: url(../img/hoge.png), url(../img/fuga.png);
background-repeat: no-repeat, no-repeat;
background-position: bottom left, right bottom;
background-size: 625px 5px, 197px 245px;

ただ、backgroundプロパティだけで全部指定する方法は無理だった。

(バッドプラクティスっぽい方法)

background: url(../img/hoge.png), url(../img/fuga.png), no-repeat, no-repeat;

わりと便利かもしれない。