Apply multiple CSS3 Background-Image from multiple statements

Question

I want to use multiple CSS3 background images and it makes semantic sense to do this in two different declarations like so:

#brands > ul > li:nth-child(odd) {
    background-image: url(img/logo/divide.jpg) no-repeat left center, url(img/logo/divide.jpg) no-repeat right center;
}

#brands .name {
    background:url(img/logo/name.jpg) no-repeat center;
}

However the second declaration overwrites the first. Is there a way to get round this in only CSS?

Answer 1

Your selectors are fine, but your mistake is in the first declaration:

background-image: url(img/logo/divide.jpg) no-repeat left center, url(img/logo/divide.jpg) no-repeat right center;

You need to use the shorthand background property instead of background-image, because you are specifying a bunch of other values along with the images. The reason why it appears that your second rule is overriding the first, is because the first rule is invalid and therefore actually ignored altogether.

You may (as Groovetrain says) have to add another rule to combine the two though, I haven't tinkered with multiple backgrounds lately so I can't say for sure how one overrides/integrates with the other.