preference or reason

[bluewalrus]

Is specifying background-image: or -color: better then just using background: and specifying in here? I found background with the -image a while back didn't work on one browser i had (forget which one). Didn't know if there was a preference going towards being more specific and if that helped when testing on different browsers.

[Snookerman]

background is better supported than background-image.

[bluewalrus]

oo okay thanks

[Twey]

What? background is just shorthand for background-{image,color,position,repeat}. One should not be supported without the other.

[jscheuer1]

Since css cascades, at least in some browsers (perhaps all), regardless of whether or not all are specified, a later declaration of background will override earlier ones for background-color, -image, -position, -repeat.

So for example:


div {
background-image: url(some.gif);
}

div {
background: #f00;
}

will result in a red background, no image.

[Snookerman]

I had this question myself a while ago and did some researching and most of the articles that said something about the difference, said that background is better supported. Now I suspect this might not be the case with modern browsers and that the two are equally supported and background is just shorthand as you say. I don't remember which sources I found since this was some time ago and this was the only article I could quickly google myself to that talks about the support:
http://htmlhelp.com/reference/css/color-background/background-image.html (http://htmlhelp.com/reference/css/color-background/background-image.html)

Like I said, I don't think support is a big issue (if any at all), however, there is one thing that should be kept in mind: when using the shorhand background you set all the value to default (white none repeat scroll 0% 0%). So if you use for example background: blue; it will actually mean background: blue none repeat scroll 0% 0%;.

This is important to think about, e.g. say you want all div containers on you page to have a green background color so you have this piece of code:

div {
background-color: green;
}
Then say you want to give a nested container a background image:

div div#special {
background: url(foo.jpg) no-repeat;
}
Since you don't mention the color for the div#special, this will be set to default (white).
If you would use this:

div div#special {
background-image: url(foo.jpg);
background-repeat: no-repeat;
}
the div#special would have a green background color because of the first rule.
You can read more about this here:
http://www.w3.org/TR/CSS21/colors.html (http://www.w3.org/TR/CSS21/colors.html)

I see John beat me to it, I knew I should have refreshed before replying :D