More than 5 years have passed since last update.

背景画像を複数設定する

Last updated at 2017-07-24Posted at 2017-07-24

ビジュアルデザインでよく対角線上に要素を配置して枠っぽくする表現があるわけだけど、CSSの画像でそれをやろうとする場合の実現方法。

.foo {
        background-image: url(images/XXX.png), url(images/YYY.jpg);
        background-position: left top, right bottom;
        background-repeat: no-repeat, no-repeat;
        background-size: 100px 50px, 20%;
}

ぶっちゃけ、各backgroundプロパティー内でカンマで区切って設定すればOK。
backgroundプロパティーによる一括で設定は不可。

因みに上下だと先に記述した方が上になる。

【追記】
用語のご指摘ありがとうございます

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up