CODEWITHSUNDEEP
javascriptjquerycss
Zhivko
Zhivko

Reputation: 550

Add a second background-image to element

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

Upvotes: 0

Views: 734

Answers (2)

user1337
user1337

Reputation: 847

How about:

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

Upvotes: 0

BoltClock
BoltClock

Reputation: 723688

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)');
    }
});

Upvotes: 1

Related Questions