CODEWITHSUNDEEP
jquerycss
kPow989
kPow989

Reputation: 426

How to change background image with jquery?

Hi I'm having problem changing the background-img of a div using jquery:

Initially I set it as so

#div-id {
background: url(../images/conv1.png) no-repeat center top;
}

Then in a script that starts later after a timeout I do this:

$('#div-id').css('background', 'url("../images/conv2.png")');

When I do this however the image just disappears, yet when I look at element inspector in Chrome-tool its says:

$('#div-id').css('background', 'url("../images/conv3.png")');

I am lost as to where I'm going wrong.

Upvotes: 0

Views: 243

Answers (2)

Iain Hodgen
Iain Hodgen

Reputation: 1

Add each attribute individually:

$("#RenderedText").css('background-image', 'url(' + imageString + ')');  
$("#RenderedText").css('background-repeat', 'no-repeat');  
$("#RenderedText").css('background-position', 'right top');

Upvotes: 0

Johannes
Johannes

Reputation: 67798

use background-image as a property both in the CSS and in jQuery, and apply the other properties in CSS seperately (background--position, background-size, background-repeat etc.)

#div-id {
  background-image: url(../images/conv1.png);
  background-repeat: no-repeat;
  background-position: center top;
}

and

$('#div-id').css('background-image', 'url(../images/conv2.png)');

Upvotes: 1

Related Questions