jquery not changing css background-image property

Question

I am trying to make a simple slideshow that changes the css background-image using JQuery.

Fiddle: http://jsbin.com/xinihokuso/edit?js,console

var images = [
  "http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w",
  "http://cimages.prvd.com/is/image/ProvideCommerce/PF_15_R105_MINIMAL_VA0211_W1_SQ?$PFCProductImage$",
  "http://media02.hongkiat.com/ww-flower-wallpapers/purplecrocus.jpg",
  "http://www.ninthstreetflowers.com/smp/Smp1/images/flower4.jpg",
  "http://magic-spells-and-potions.com/images/flower-language-vertical.png",
];

var i = 0;

var div = $('.header_summer');

$(document).ready(function() {
  console.log("loaded");

  setTimeout(changeBack, 1000);
});

function changeBack() {
  i = i = ++i % images.length;

  if (i > images.length) {
    i = 0;
  }

  console.log('url(' + images[i] + ') no-repeat 0 0;');

  div.css('background', 'url(' + images[i] + ') no-repeat 0 0;');

  setTimeout(changeBack, 5000);
}

<div class="header_summer"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<style type="text/css">

.header_summer  {
  background: url('http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w') no-repeat 0 0; 
  background-size: cover;
  min-height: 920px; /* 800px; */
}

</style>

Everything looks right, the console is showing the correct CSS background-image value on each cycle, but all that is happening is the original image from the initial declared CSS is showing. Any ideas?

Please don't tell me to try to create unique CSS selectors for each image and simply change the style. That is not what I am trying to achieve here.

See my updated answer

Cornwell
– Cornwell

2016-05-19 20:08:04 +00:00
Commented May 19, 2016 at 20:08 — Cornwell
– Cornwell, Commented May 19, 2016 at 20:08

DinoMyte · Accepted Answer · 2016-05-19 20:13:52Z

2

You need to remove the semi-colon(;) after declaring the pixels.

 div.css('background', 'url(' + images[i]  + ') no-repeat 0px 0px');

Working example : https://jsfiddle.net/DinoMyte/ez8cgsx7/8/

answered May 19, 2016 at 20:13

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

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

2 Comments

Nick Over a year ago

that's got it! Thanks!

DinoMyte Over a year ago

Sure. Glad to help :)

Cornwell · Accepted Answer · 2016-05-19 20:13:11Z

You are missing the class selector, it should be:

var div = $('.header_summer');

Also, background-image does not take that many parameters:

div.css('background-image', 'url("../tpl/mbmhv1/images/' + images[i] + '")');

Use background if you want parameters

Edit:

You need to add some css to your element

.header_summer {
    width: 100%;
    height: 100%;
    position: absolute;
}

Fiddle: http://jsbin.com/zufekurapo/edit?output

var images = [
  "http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w",
  "http://cimages.prvd.com/is/image/ProvideCommerce/PF_15_R105_MINIMAL_VA0211_W1_SQ?$PFCProductImage$",
  "http://media02.hongkiat.com/ww-flower-wallpapers/purplecrocus.jpg",
  "http://www.ninthstreetflowers.com/smp/Smp1/images/flower4.jpg",
  "http://magic-spells-and-potions.com/images/flower-language-vertical.png",
];

var i = 0;

var div = $('.header_summer');

$(document).ready(function() {
  console.log("loaded");

  setTimeout(changeBack, 1000);
});

function changeBack() {
  i = i = ++i % images.length;

  if (i > images.length) {
i = 0;
  }

  console.log(images[i]);

  div.css('background', 'url(\''+images[i] + '\') no-repeat');

  setTimeout(changeBack, 2000);
}

.header_summer {
    width: 100%;
    height: 100%;
    position: absolute;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="header_summer"></div>
</body>
</html>

you must append div.css({ background-repeat:"no-repeat", background-position: "0px 0px" }) in order to keep the css effect on image.

Rion Williams · Accepted Answer · 2016-05-19 20:20:06Z

1

Check your selector and scope

If you want to target the element you provided in your example, your jQuery selector should include a . to indicate you are targeting an element with the class of "header_summer" :

var div = $(".header_summer");

Additionally, declaring this before your $(document).ready(){ ... }); block is going to cause some issues as jQuery will not be available at the time. Consider declaring your variable and then setting it within that function :

var div;
$(document).ready(function(){
     div = $(".header_summer");
});

Simplify setting your background

Currently, you are attempting to set all kinds of other properties in addition to just background-image within your CSS call. If you want to do this, you should consider using background instead of background-image :

div.css("background", "url('" + images[i] + "') no-repeat 0px 0px");

or if you are using background-image then just set the background :

div.css("background", "url('" + images[i] + "')");

Putting it all together

.header_summer {
  background: url('http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w') no-repeat 0px 0px;
  background-size: cover;
  min-height: 920px;
  /* 800px; */
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Flowers and stuff...</title>
</head>

<body>
  <!-- Your element to switch through -->
  <div class='header_summer'></div>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script>
    // Define your images
    var images = [
 "http://static1.squarespace.com/static/550b669de4b0d91b0f49935d/t/551b6575e4b0c2174c3a6f54/1427858806833/flowers.jpg?format=1500w",
      "http://cimages.prvd.com/is/image/ProvideCommerce/PF_15_R105_MINIMAL_VA0211_W1_SQ?$PFCProductImage$",
      "https://i.kinja-img.com/gawker-media/image/upload/s--8a-AXhau--/c_scale,fl_progressive,q_80,w_800/zec3un8rzcmblrdlyswb.jpg",
      "http://media02.hongkiat.com/ww-flower-wallpapers/purplecrocus.jpg",
      "http://www.ninthstreetflowers.com/smp/Smp1/images/flower4.jpg",
      "http://magic-spells-and-potions.com/images/flower-language-vertical.png",
    ];
     // Define your variables
    var i = 0;
    var div;
    $(function() {
      // Set up your div
      div = $('.header_summer');
      console.log("loaded");
      setTimeout(changeBack, 1000);
    });

    function changeBack() {
      i = ++i % images.length;
      if (i > images.length) {
        i = 0;
      }
      console.log('url("' + images[i] + '");');
      div.css('background-image', "url('" + images[i] + "')");
      setTimeout(changeBack, 5000);
    }
  </script>
</body>
</html>

edited May 19, 2016 at 20:20

answered May 19, 2016 at 19:52

Rion Williams

76.9k38 gold badges206 silver badges335 bronze badges

5 Comments

Nick Over a year ago

thanks for the concise answer, the issue with my code was in fact the semicolons after the css declaration - so i have marked that as the correct answer, but your code will serve as a good example for people with the same problem.

Rion Williams Over a year ago

No problem. Just glad that everything is working. Issues like these can be a pain to troubleshoot.

Nick Over a year ago

do you have anysuggestions on how I might make the transition nicer, I was going to append .fadeIn(1000) to the line that sets the new css params, but it seems to be loading it in the BG befoe removing the orig. Any ideas? perhaps this is for a new question...

Rion Williams Over a year ago

Add a transition via transition: 0.5s on your .header_summer CSS class.

Nick Over a year ago

just tried it, no joy. See my new question: stackoverflow.com/questions/37333917/…

Xavier J · Accepted Answer · 2016-05-19 20:09:17Z

0

Change a single line of code:

div.css('background-image', 'url(' + images[i] + ')').css('background-repeat','no-repeat').css('background-position','left top');

answered May 19, 2016 at 20:09

Xavier J

4,7911 gold badge16 silver badges29 bronze badges

Collectives™ on Stack Overflow

jquery not changing css background-image property

4 Answers 4

2 Comments

1 Comment

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related