Multiple background images/gradients for same element, declared in different statement, in CSS3

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... */开发者_JS百科
}

#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!

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.

Unfortunately, there's still no way to do this in CSS3 in a concise way. However, you could use pseudo-elements for extra background layers and override those instead. Here's an article that explains the technique: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

CSS3 supports multiple backgrounds - have you tried this?

If you use Less CSS you can do the following:

/** 
 * Defines a horizontal gradient, but allows additional image url's to be passed     through the CSS3 compliant browsers to display multiple i
 * image on the one element
 */

.background-gradient-multiple(@start-color, @end-color) {
    .background-gradient-horizontal(@start-color, @end-color);
}
.background-gradient-multiple(@start-color, @end-color, @additional-background) {
    .background-gradient-horizontal(@start-color, @end-color, @additional-background ~ ',');
}
.background-gradient-horizontal(@start-color, @end-color, @additional-background: ~'') {
    background-color: @start-color;
    background-image: @additional-background -moz-linear-gradient(left, @start-color,  @end-color);
    background-image: @additional-background -webkit-gradient(linear, 0 0, 100% 0, from(@start-color), to(@end-color));
    background-image: @additional-background -webkit-linear-gradient(left, @start-color, @end-color);
    background-image: @additional-background -o-linear-gradient(left, @start-color, @end-color);
    background-image: @additional-background linear-gradient(to right, @start-color, @end-color);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@start-color, endColorstr=@end-color, GradientType=0);         
} 

to execute this in a class you can do:

.class { .background-gradient-multiple(#000000, #FFFFFF, 'url(images/test.gif) no-repeat top left');  }

Using CSS pseudo elements you may achieve the expected result here is an example : http://jsfiddle.net/2s9uj24m/

<div id="alfa">Alfa</div>
<div id="bravo">Bravo</div>
<div id="charlie">Charlie</div>

CSS would look like :

div
{   position:relative;
    background:linear-gradient(to top, #aaa, #eee);
}
div::after
{   content:" ";
    position:absolute;
    top:0;right:0;bottom:0;left:0;
}
#alfa::after{background-image:url();}
#bravo::after{background-image:url();}
#charlie::after{background-image:url();}

PS : Unfortunately there is no concept of "Arrays" or "Variables" in CSS... Wouldn't it be great to have a CSS file looking like :

@variables
{   color1:#aaa;
    color2:#eee;
    var:"the/path/to/an/image.png";
}
.myclass
{   background:linear-gradient(to top, @color1, @color2),url(@var);
    other-general-css-properties-for-that-king-of-elements...
}
#myID
{   @var:"the/path/to/another/image.png";
}
:target
{   @color1:#777;
    @color2:#aaa;
}

Just being able to have variables for colours would be such a time saver !

Try this. replace all the background in .myClass with background-color.