How to change background-image of a div?

Question

CSS

background-image:url(../back/back01.jpg); //this works

JS

function switchRight(){
    $('#slider00').css("background-image","url(../back/back02.jpg)");
}

back01.jpg is removed, but back02.jpg is not loaded.

Check this once. It may helpful http://stackoverflow.com/questions/253689/switching-a-div-background-image-with-jquery — Anshu, Dec 05 '12 at 06:57
Please check your image path, might be wrong relative path causing this error. — Rajiv Pingale, Dec 05 '12 at 07:05

score 3 · Answer 1 · answered Dec 05 '12 at 07:01

Make sure that you image is exist in defined folder.

You can also give css class by below code.

  .imageclass
  {
    background-image:url(../back/back01.jpg);
  }

   function switchRight(){
     $('#slider00').addClass('imageclass'); // same way you can use remove class
   }

score 2 · Accepted Answer · answered Dec 05 '12 at 06:58

2

Assume your css files in folder

function switchRight(){
    $('#slider00').css("background-image","url(back/back02.jpg)");
}

Please check

answered Dec 05 '12 at 06:58

Achintha Samindika

1,944
1
20
31

score 1 · Answer 3 · answered Dec 05 '12 at 06:55

1

It is because of the path to the background image. When setting it via css the path is relative to where your css file is located. When you do it in javascript use path relative to the root of the application.

answered Dec 05 '12 at 06:55

Konstantin Dinev

34,219
14
75
100

Thanks a lot to everyOne. Solved. – Alegro Dec 05 '12 at 06:56

Teddy · Answer 4 · 2012-12-06T04:11:40.397

1

You may need to check the the path for image. The first is based on the css file's current path, while the second is based on web site root.

edited Dec 06 '12 at 04:11

answered Dec 05 '12 at 06:55

Teddy

1,407
10
19

score 1 · Answer 5 · answered Dec 05 '12 at 07:01

1

Try this

$('#slider00').css("background-image", "url(../back/back02.jpg)");

$('#slider00').click(function()
{
  // do my image switching logic here.
});

answered Dec 05 '12 at 07:01

Anshu

616
7
19

How to change background-image of a div?

5 Answers5