Web制作メモ -トップへ-

[CSS] backgroundで画像を複数指定する

HTML&CSS2015.11.27 20:38

CSS3からbackgroundで画像を複数指定できます。

これを知らないと意味のないDIVでラップするなどしなければなりません。

サポート状況はChromeは勿論問題なく、IEは11,10,9は実際に試しましたが問題ありません。

IE 8以下は試していないので不明です。

指定方法はいたって簡単で、セミコロンで区切ってずらずらと書き連ねるだけ。

ただし、backgroundは何か書き方にコツが要るのか、上手く行きませんでした。

その為、background-image、background-position、background-repeatに分けて書いています。

backgroundでも出来るそうですが、書き方が不明です。

分けて書けばいいだけなので十分満足です。

backgroundに複数画像を指定する

background-image: url(/img/test1.png), url(/img/test2.png);
background-position: 0 bottom, 0 top;
background-repeat: repeat-x, repeat-x;

さらにセミコロンで区切って画像を指定すれば、3つ4つと指定出来ます。

たまに忘れてDIVラップで囲いそうになるので、忘れないようにしなければ。