If Background-Image url = then

Question

What I am trying to do is change the background-image of a div, but only if the background-image url matches a certain url.

Here is the HTML:

<div class="test" style="background-image: url("/background1.png");">

Now what I've tried is this:

if ($('.test').css('background-image') === 'url(/background1.png)') {
    $('.test').css("background-image", "url(/background2.png)");
}

I know that the replace works, because if I remove the first line it updates all the background images for me, but I can't seem to get the first line to work.

Bigalow · Accepted Answer · 2016-02-21 08:09:31Z

3

You could use something like this

 var bg = $(".test").css('background-image');
 bg = bg.replace('url("','').replace('")','');


 if (bg === '/background1.png') {
    $('.test').css("background-image", "url(/background2.png)");
 }

Example fiddle: https://jsfiddle.net/bpv4Lggv/19/

edited Feb 21, 2016 at 8:09

answered Feb 21, 2016 at 7:56

Bigalow

3212 silver badges14 bronze badges

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

Comments

user5862470 · Accepted Answer · 2016-02-21 07:27:29Z

0

.prop() might get you where you need to be.

http://www.w3schools.com/jquery/html_prop.asp

http://api.jquery.com/prop/

answered Feb 21, 2016 at 7:27

user5862470

Comments

Cyril Cherian · Accepted Answer · 2016-02-21 07:27:43Z

0

Use filter to get all the div with class test and matches background image (url(/background1.png))

var filtered = $('.test').filter(function(test){
  return $(test).css('background-image') === 'url(/background1.png)';
});
//change filtered DOM only, with the new image background
$(filtered).css("background-image", "url(/background2.png)"); }

answered Feb 21, 2016 at 7:27

Cyril Cherian

32.4k7 gold badges48 silver badges57 bronze badges

Comments

salmon · Accepted Answer · 2023-10-20 01:42:20Z

0

I'm not familiar with JQuery but I think this was what you were asking for(in plain JavaScript)?

  if(element.style.backgroundImage == 'url("imagePathHere")'){
 // your code }

It's probably of little use now, but I was stuck trying to find a solution for a while until I console logged it and realized what my problem was, so maybe it can help someone else now😅

edited Oct 20, 2023 at 1:42

answered Oct 20, 2023 at 1:40

salmon

11 bronze badge

Collectives™ on Stack Overflow

If Background-Image url = then

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related