CSS:1つの要素に背景画像(background-image)を複数設置

Date :
Category :
CSS
Share this :

CSSにて1つの要素に背景画像を複数指定して設置する方法になります。
デザインによっては今まで、親要素・子要素と画像を分けて設置していたものが、1つの要素で背景画像を一括で設置できるようになるので便利になります。

まずは、通常の背景画像を1つ指定する場合の記述例を簡単に。

背景画像を1つ設置する場合

CSS

div{
    background-image: url(images/○○○.png);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100px 50px;
}

または上記を「backgound」プロパティで一括指定にして、

div{
    background: url(images/○○○.png) left top no-repeat;
    background-size: 100px 50px;
}

とするのが通常ですね。
ちなみに、CSS3で追加された「background-size」は、「background」プロパティを使用しての一括指定には含むことが出来ませんので、これについては分けて記述する必要があります。

【background-sizeの主要対応ブラウザ : バージョン】
  • Google Chrome : ver. 4〜
  • Firefox : ver. 4〜
  • Safari : ver. 5〜
  • IE : ver. 9〜
  • Opera : ver. 10.5〜

続いて、本題の背景画像を複数設置する場合。

背景画像を複数(2つ)設置する場合

1つの画像を指定するごとに「,(カンマ)」で区切るようにします。
「background-position」と「background-repeat」も画像の指定順通り同様に記述します。

尚、画像表示の上下関係は、先に記述した画像が上に表示されるようになります。

CSS

div{
    background-image: url(images/○○○.png), url(images/△△△.jpg);
    background-position: left top, left bottom;
    background-repeat: no-repeat, repeat;
    background-size: 100px 50px, auto;
}

また、画像を複数指定する場合は、「backgroud」プロパティを使用して一括指定で記述をすると表示が正常に行われませんので、それぞれ個別のプロパティを使用して記述してください。

以上、「CSS:1つの要素に背景画像(background-image)を複数設置」でした。