2

Good day.

HTML

<div id="Button"></div>

CSS

background: url("../images/play.png") left center no-repeat;
background-size: cover;
width: 100px;
height: 100px;
float: left;
cursor: pointer;

JQuery

$("#Button").on("click",function() {
  $(this).css("background", 'url("../images/pause.png") left center no-repeat;');
});

But unfortunately, the background doesn't change. Why doesnt it?

Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239
  • There's no obvious error. Please make a demo in what environment you are using this (when are you calling the snippet, how does the DOM look). – Bergi Sep 19 '13 at 18:44
  • maybe [Why does jQuery or a DOM method such as \`getElementById\` not find the element](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element)? – Bergi Sep 19 '13 at 18:46
  • Your issue is likely related to the structure of your file system. The path `../images/` is relative to the context in which it's being executed, which depending on where your CSS and JS reside, may be different. – André Dion Sep 19 '13 at 18:47

5 Answers5

3

Your issue is with the semicolumn in the end of the property value. remove it and try.

EX:

$(this).css("background", 'url("http://placehold.it/32x32") left center no-repeat');

Fiddle

presence of semi-column while specifying the value for the css property name makes it invalid and it doesn't get applied.

 $(this).css("background", 'url("../images/pause.png") left center no-repeat;');
                                                                            ^___ Here

Also do note that applying css directly to the element makes it more difficult for cascading the styles and less maintainable, since they are applied directly on to the style property of the element. Best way to go is to add a css rule and set the class to the element.

PSL
  • 123,204
  • 21
  • 253
  • 243
  • 1
    yes, thanks for help, i dont know that symbol **;** not need write... +1) –  Sep 19 '13 at 19:02
1

This is more efficient way and you seperate your code

HTML

<div id="Button"></div>

CSS

background: url("../images/play.png") left center no-repeat;
background-size: cover;
width: 100px;
height: 100px;
float: left;
cursor: pointer;

div with Class bg

div.bg {

background: url("../images/pause.png") left center no-repeat;

}

JQuery

$("#Button").on("click",function() {
  $(this).addClass("bg");
});
zEn feeLo
  • 1,877
  • 4
  • 25
  • 45
  • 1
    thanks. good answer but i want know where error in my code. thanks for answer. +1) –  Sep 19 '13 at 19:01
0

Try to set each property separately. Also you should check that url is correct.

Alex Art.
  • 8,711
  • 3
  • 29
  • 47
0

Try this:

$("#Button").on("click", function () {
    $(this).css({
        'background-image': 'url("../images/pause.png")', 
        'background-position': 'left center', 
        'background-repeat': 'no-repeat'
    });
});

As Bergi and André Dion mentioned in the comments, you can remove the background-position and background-repeat properties if they don't need to change when the background image does.

Sadiq
  • 2,249
  • 2
  • 24
  • 32
0

The issue may have been incorrect image paths or the semicolon in the css (adding a semicolon will make it not work). I have created a jsfiddle the demonstrates the solution to your problem, although with alternate images since I don't have access to your originals.

http://jsfiddle.net/VpWcB/

The relevant js code is reproduced below:

$("#Button").on("click", function(){
    $(this).css('background', 'url(../images/pause.png) left center no-repeat');
})
Jeff Escalante
  • 3,137
  • 1
  • 21
  • 30
  • How is your solution different than the OP's? What is invalid about his CSS? – André Dion Sep 19 '13 at 18:50
  • I think it was pretty clear in my answer - the semicolon was incorrect, and the image path may have been incorrect (but I can't be sure). In addition, I have an example of the code here working linked in a jsfiddle. I think it may be a little harsh to downvote a correct answer with a working example @AndréDion - please don't be a troll. – Jeff Escalante Sep 19 '13 at 18:52
  • 1
    Downvotes are a part of SO and are a way to measure the quality of content—get used to it. Your original answer didn't mention anything about a semi-colon—it simply stated that his CSS was invalid. – André Dion Sep 19 '13 at 18:56
  • I understand this, but I am more used to downvotes being used on low quality content as you mentioned, not content that correctly answers posted questions, explains possible reasons why, and provides functional examples of the solution, as this answer does. – Jeff Escalante Sep 19 '13 at 19:03