Question

I am trying to do a little thing with CSS3… I would like to set for a bunch of elements with class “.myClass” a gradient with -xxx-linear-gradient (generated with colorzilla.com/gradient-editor for compatibility).
But each of these elements with class “.myClass” has an Id, and depending on the Id, I would like to add different background-images on the top of gradients (as in a multiple background statement).
Something like this:

.myClass {
    /* linear gradient... */
}

#myId1 {
    background-image: url(img1.png); /* or background: url(...), same result */
}

#myId2 {
    background-image: url(img2.png);
}

The problem is that the images defined with the #Ids replace the gradient instead of making multiple backgrounds. I could copy the gradient CSS code to each Id, and then have multiple backgrounds, but the compatibility code given by colorzilla is quite huge for just a gradient, so copying it in each id would make the code more unreadable…

Ids have the priority, but I was wondering if there was a way to “add” the second background-image instead of replacing it.

If you have any idea, thanks a lot!

Answer 1

You can’t use multiple background in separate background statements. If you want multiple backgrounds, you have to declare them all in one background statement. This is because in multiple background statements, the rendering engine assumes you mean to replace the previously-set background with the new one, instead of adding to what’s there.

One thing I generally do with CSS3, particularly when still needing all of the vendor prefixes, is to put all the CSS3 into its own file. That way, the rest stays readable and it’s not mixed into the main CSS.