CSSでbackground画像を2つ設置したい場合は「,(カンマ)」で区切ると複数設置することができる。
これはCSS3から可能になったようで、メジャーなブラウザは大半対応しているので、常時使用していいと思う。
background: url(../img/画像01.png) , url(../img/画像02.png);
(↑)例えばこんな感じのリンクボタンを作成する時に、背景画像と矢印アイコンをbackgroundで設置したい時はこう書く。
background: url(../img/arrow.png) no-repeat 98% center, url(../img/pattern.jpg) repeat;
CSSの解釈としては上から順番に読み込まれて上書きされていくけど、この背景画像の複数設置の場合は、下から順番に設置されていくので、一番上のurl()の中が上にくる。
なので、矢印アイコンは上に記述しないと、背景画像で隠れてしまう。
ちなみに、背景画像と背景色を同時に反映させる場合はこう書く。
background: #000 url(../img/◯◯.png) no-repeat;
この場合はカンマはなし。
まぁ、こうでもいいんだけど
background-color: #000; background-image: url(../img/◯◯.png); background-repeat: no-repeat;
ただ、この書き方だと「background-position」「background-repeat」「background-size」も全部個別に記述しないといけないので、ただコードが長くなる…。