CSS背景２つ（複数）backgroundとbackground-image間違いそうな所

7,217views／投稿 2013-07-20／更新 2014-03-18

CSS3で背景が複数設定できるようになって便利になりましたが、backgroundとbackground-imageでちょっと混乱するところがあるのでエントリー。

結論：
background-imageよりbackgroundの方がまとめ易く賢い

×機能しない {
background-image: url(AAA.jpg) repeat-x center top,url(BBB.jpg) repeat center top;
}

◎機能する {
background: url(AAA.jpg) repeat-x center top,url(BBB.jpg) repeat center top;
}

backgroundだと一行にまとめられますが、background-imageだと機能しません。

なぜ混乱しちゃったのか？

普通のCSS3背景複数設置の説明のされ方がbackground-imageとbackground-repeatとbackground-positionを掛けあわせたものが多いのでまとめることできるじゃんと思ってbackground-imageでまとめてしまうと機能しなくて、どこが間違ったかわからなくなってしまうケース。でもbackground-imageをbackgroundにすれば出来てしまうという事ですね。

◯一般的な紹介のされ方 {
background-image: url(AAA.jpg),url(BBB.jpg);
background-repeat: repeat-x,repeat;
background-position: center top,center top;
}

×あれ？まとめられそう {
background-image: url(AAA.jpg) repeat-x center top,url(BBB.jpg) repeat center top;
}

◎まとめるならbackgroundを {
background: url(AAA.jpg) repeat-x center top,url(BBB.jpg) repeat center top;
}

ちなみに、

背景が複数の場合は先に記述したものが上にきます。ということは、アイコン的な画像を上にして、下側にグラデーション背景を設定する何てことがbackgroundなら可能ということですね。background-imageが無くなれば話は単純になりますね。