WEB系キャンパス

CSSでbackground画像を複数読み込む場合の書き方

CSSでbackground画像を2つ設置したい場合は「,(カンマ)」で区切ると複数設置することができる。
これはCSS3から可能になったようで、メジャーなブラウザは大半対応しているので、常時使用していいと思う。

background: url(../img/画像01.png) ,
            url(../img/画像02.png);

css_btn-sample
(↑)例えばこんな感じのリンクボタンを作成する時に、背景画像と矢印アイコンを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」も全部個別に記述しないといけないので、ただコードが長くなる…。

Comment Form