CODEWITHSUNDEEP
jquery
N.Widds
N.Widds

Reputation: 277

Add Two Background Images to the Body With JQuery

I need to add two separate background images to the body tag using JQuery. Initially this was achieved with the following class:

.background: url(../img/ad-takeoverbkg-left.jpg) top left no-repeat, url(../img/ad-takeoverbkg-right.jpg) top right no-repeat;

And this worked fine However I now need to dynamically deliver the URL values via JavaScript. The values are retrieved from a JSON array using AJAX. The code I currently have is:

$('body').css({
'background-image' : 'url(' + data.leftWpTakeover + ')',
'background-position' : 'top left',
'background-repeat': 'no-repeat',
'background-image' : 'url(' + data.rightWpTakeover + ')',
'background-position' : 'top right',
'background-repeat': 'no-repeat'
});

This works but the second image replaces the first leaving only the second image added. I need the code to add both background images to the body tag. Can you please help?

Thanks.

Upvotes: 0

Views: 204

Answers (1)

Kaloyan
Kaloyan

Reputation: 106

You can add multiple images to the background by listing them with a comma between them like this:

'background-image' : 'url(' + data.leftWpTakeover + '), url(' + data.rightWpTakeover + ')'

Upvotes: 1

Related Questions