どうも7noteです。背景画像やグラデーションを指定するときに使うbackgroundプロパティは、複数指定することができます。

背景の複数指定の方法

background: url(img1.png),url(img2.png),url(img3.png);

background:背景１, 背景2, 背景3と書きます。

この場合重なり順は、

1.img1.png(最前面)
2.img2.png
3.img3.png(最背面)

となります。

repeatやpositionなども、それぞれ個別に指定が可能。

上と同じ書き方でカンマ（,）で区切ることでそれぞれ個別に指定ができます。

background: url(img1.png),url(img2.png),url(img3.png);
background-repeat: no-repeat,no-repeat,repeat;

repeatだけでなく、（background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size）それぞれ個別指定可能です。

背景画像の上にグラデーションをかけるなどができるのでかなり重宝するやり方なので、
覚えておいて損はないと思います。

まとめ

backgroundは2重で指定できる事を知らない人もちょこちょこいたので、記事にしました。
背景を2重にするために、わざわざ要素を2個作らなくていいのは便利なので使ってみてください。

おそまつ！