How can I change second background-image url with JavaScript/jQuery

Question

I have a element with following style:

.element {
    background: transparent url(backgroundimage1.png) no-repeat,
        transparent url(backgroundimage2.png) no-repeat;
}

Is it possible to change only the second background url using JavaScript or jQuery without a lot of code?

Try this: $('.element').css('background', 'transparent url(backgroundimage1.png) no-repeat, transparent url(newimage.png) no-repeat'); — Deepak Biswal
– Deepak Biswal, Commented Dec 3, 2015 at 13:23
@sfandler I hope this answer works for you, if it does please mark it as correct :D. — Ali Elzoheiry
– Ali Elzoheiry, Commented Dec 3, 2015 at 15:52
@Zoheiry Oh, yea thanks.. I upvoted but somehow forgot to accept the answer haha. — sfandler
– sfandler, Commented Dec 3, 2015 at 17:01
@sfandler Thanks, feel free to ask me anything at anytime ;) — Ali Elzoheiry
– Ali Elzoheiry, Commented Dec 3, 2015 at 17:40

Ali Elzoheiry · Accepted Answer · 2015-12-03 13:23:30Z

4

Yes it is possible with a little string manipulation using jQuery.

var first_background = $(".element").css('background').split(',')[0];
var second_background = $(".element").css('background').split(',')[1];
var new_background = //add new background here.
$(".element").css('background', first_background + ',' + new_background);

And you're done.

answered Dec 3, 2015 at 13:23

Ali Elzoheiry

1,6821 gold badge14 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I change second background-image url with JavaScript/jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related