MENU

Multiple backgrounds

CSSで背景に複数画像使えるやつ、いつの間にか全ブラウザ(IE9以上)で実装されていました。https://caniuse.com/#feat=multibackgrounds

あんまり使わないから気がつかなかった

#ex {
  background-image: url(img_front.png), url(bg.png);
}

background-imageにカンマ区切りで複数の画像を設定できます。
記述順で下にレイヤーが重ねられていきます。(例の場合はimg_front.pngが一番手前、bg.pngが下のレイヤー)

#ex {
  background-image: url(img_front.png), url(bg.png);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

positionやrepeatのプロパティはbackground-imageの順番通りにカンマ区切りで指定するか、
下の例のようにbackgroundのショートハンドプロパティで指定できます。

#ex {
  background: url(img_front.png) right bottom no-repeat, url(bg.png) left top repeat;
}
よかったらシェアしてください!
もくじ
閉じる