Geek asks and answers

Apply multiple CSS3 background images from multiple statements

I want to use multiple CSS3 background images, and that makes semantic sense of doing this in two different declarations:

#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 around this only in CSS?

+3
source share
2 answers

Your selectors are fine, but your error 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 a shorthand property backgroundinstead background-image, because you specify a bunch of other values ​​along with the images. The reason your second rule seems to override the first is because the first rule is invalid and therefore actually ignored altogether.

( Groovetrain ), , , , , / .

+3

, 'name'. :

#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;
}

/* This one has all three bg images */
#brands > ul > li.name:nth-child(odd) {
  background: url(img/logo/divide.jpg) no-repeat left center, url(img/logo/divide.jpg) no-repeat right center, url(img/logo/name.jpg) no-repeat center;
}
0

More articles:


All Articles