Question

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 add the new background url below the first.

Here is the what the original CSS will look like..

#cover-art {
    background:
        url('http://beta.mysite.net/img/banner1.png') top left no-repeat,
    padding:250px 0 0;
}

What I would like to do via jquery is add another image url line below the first one like this…

#cover-art {
    background:
        url('http://beta.mysite.net/img/banner1.png') top left no-repeat,
            url('http://beta.mysite.net/img/banner2.png') top left no-repeat,
    padding:250px 0 0;

}

Also something to note is that #cover-art css is in an external style sheet.

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