Question

I am wondering whether it is possible to assign second background-image to element through CSS3 or jQuery/js.

To make it clear am I aware I can make it this way:

 .someElement { background-image: url(sheep.png), url(betweengrassandsky.png); }

The thing is I need to do it something like this:

 .someElement             { background-image: url(sheep.png); }
 .someElement.secondClass { background-image: url(betweengrassandsky.png); }

The problem is this will just overwrite the first background-image instead of combining them.
Is there any solution to this?

Thanks

Answer 1

You’ll have to repeat the first background image as you show in your first line of CSS.

If you want, you can check .someElement to see if it has the second class, and apply it using jQuery:

$('.someElement').each(function() {
    if ($(this).hasClass('secondClass')) {
        var background = $(this).css('background-image');
        $(this).css('background-image', background + ', url(betweengrassandsky.png)');
    }
});