jquery background-image change

Question

I want to load images into a div on my html but it doesn't work, if i change the var image = $("#slider") to $("body") it works, but then the whole body fades in and out and thats not what i wanted.

i guess there is something wrong with the identifier?

    $(document).ready(function(){
    var count = 0;
    var images = ["/mvc_tut/views/index/images/bg1.jpg","/mvc_tut/views/index/images/bg2.jpg","/mvc_tut/views/index/images/bg3.jpg","/mvc_tut/views/index/images/bg4.jpg"];
    var image = $("body");

    image.css("background-image","url("+images[0]+")");

    setInterval(function(){
      image.fadeOut(1000, function(){
        image.css("background-image","url("+images[count++]+")");
        image.fadeIn(1000);
      });
      if(count == images.length)
      {
        count=0;
      }
    },3000);
});

thats the html

<div class="container">
  <div id="#slider">
  <div class="row">
    <div class="col-md-6 homeleft">
    </div>
    <div class="col-md-3 col-md-offset-2">
      <div class="login">
        <form action="index/login" method="POST">
          <input type="text" class="form-control" name="userLogin" placeholder="Nutzername">
          <input type="password" class="form-control" name="passwortLogin" placeholder="Passwort">
          <button type="submit" class="btn btn-default">Anmelden</button>
        </form>
      </div>
      <div class="register">
        <form action="index/register" method="POST">
          <input type="text" class="form-control" name="userReg" placeholder="Nutzername">
          <input type="text" class="form-control" name="emailReg" placeholder="Email">
          <input type="password" class="form-control" name="passwortReg" placeholder="Passwort">
          <button type="sumbit" class="btn btn-default">Registrieren</button>
        </form>
      </div>
    </div>
  </div>
</div>
</div>

Praveen Kumar Purushothaman · Accepted Answer · 2015-10-11 17:05:31Z

1

The problem is here:

<div id="#slider">
<!-------^ // Please remove the #

The HTML elements should not have an id starting with #. Moreover, from the documentation:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

answered Oct 11, 2015 at 17:05

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

1 Comment

LukasA Over a year ago

omg i was blind, thanks for helping me out, sometimes i make such small mistakes that are actually pretty big...

Søren Pedersen · Accepted Answer · 2015-10-11 17:00:06Z

1

I see you have "#slider" in the id value. You should not have a '#' in there. '#' is only used by jQuery to identify a select on id.

answered Oct 11, 2015 at 17:00

Søren Pedersen

112 bronze badges

Collectives™ on Stack Overflow

jquery background-image change

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related