CODEWITHSUNDEEP
jqueryhtmlcss
user2137186
user2137186

Reputation: 837

not able to change background image using jquery

i got a css file whose path is resources/style/test.css and an image folder whose path is resources/images/characters. on using the following class and html

    .character
{
position:relative;
margin-top:-4.8%;
margin-left:85%;
height:51px;
width:51px;
background-color:#e3f4fd;
background-image:url(../images/characters/9.png);
background-position:center;
background-repeat:repeat-y;
}

html:

 <div class="character" style="display:inline-block;">
</div>

it shows me the required image but i want to change this background image using jquery and i write the following url under my conditions

$('.character', this).css("background-image", "url(../images/characters/8.png)");

nothing appears on screen ..

so i want to ask what should be the url so that the image that is changed is displayed on screen?

Upvotes: 0

Views: 229

Answers (3)

Musa
Musa

Reputation: 97717

assuming the html file is at the root, try

$('.character', this).css("background-image", "url(resources/images/characters/8.png)");

Upvotes: 1

swatkins
swatkins

Reputation: 13640

for this syntax, you need to use camelCase property names:

change

$('.character', this).css("background-image", "url(../images/characters/8.png)");

to 

$('.character', this).css("backgroundImage", "url(../images/characters/8.png)");

Upvotes: 0

Justin Bicknell
Justin Bicknell

Reputation: 4808

I am pretty sure the problem is your jQuery selector, try removing the context param:

$('.character', this) to $('.character')

Upvotes: 0

Related Questions