Add Another Background Image Via Jquery

I would like to add another background image to my div element, however I dont want to simply write over the existing one, I would like to have multiple backgrounds, so it should a

Solution 1:

Here you go. Keep in mind this won't work with a lot of browsers that are more than a couple years old:

var _oCurr = jQuery('#cover-art');
var _sBg = _oCurr.css('background-image');
_oCurr.css('background-image', _sBg + ', url(/img/banner2.png)');

Solution 2:

Try this:

var$el = $('#cover-art');
var bg = $el.css('background-image'); // old image$el.css('background-image', bg +','+ 'img/banner2.png'); // add new image

Solution 3:

Last I checked, you can't have two background images on 1 element. CSS3 allows you to do so but it won't work on some browsers. Here's a chart of compatibility.

I suggest you create another element inside #cover-art and apply the same CSS to its child except for the background image.

So for example

<div id="covert-art">
    <div id="child"></div>
</div>

#child's background image would be above the parent (#cover-art)

Check this fiddle as an example.