Changing background image with jQuery is not working

Question

Can someone please help me understand why this code is not working?

$('#quick-search-header.widget-title').css('background-image', 'url(dd_includes/images/icons/sliding-menu-arrow-right.gif)');

I see through Firebug that the background-image has been removed entirely from #quick-search-header.widget-title, but the new background image above is added to element.style. Thanks.

HTML -

<div id="quick-search-header" class="widget-title">
    <p>Quick search results</p>
</div>

CSS -

#quick-search-header.widget-title{
    background: #C60B46 url(dd_includes/images/icons/sliding-menu-arrow-down.gif) right 3px no-repeat;
}

Full JS (with error code marked) -

$(document).ready(function(){

    $('input#s').val('');

    $('#quick-search-header.widget-title').live('click', function(){

        if($('#quick-search-content').hasClass('visible')){

            $('#quick-search-header.widget-title').css('background-image', 'url(dd_includes/images/icons/sliding-menu-arrow-right.gif)'); /** Not working */
            $('#quick-search-content').removeClass('visible')
            $('#quick-search-content').slideUp('600');

        } else {

            $('#quick-search-header.widget-title').css('background-image', 'url(dd_includes/images/icons/sliding-menu-arrow-down.gif)'); /** Not working */
            $('#quick-search-content').addClass('visible')
            $('#quick-search-content').slideDown('600');

        }

    });

});

you say its been added to element.style, this is correct. What do you think isn't working? — Jon Taylor
– Jon Taylor, Commented Jul 17, 2012 at 14:22
Works fine for me.jsfiddle.net/FN3uE Check if the image url is resulting in a 404 status — Chandu
– Chandu, Commented Jul 17, 2012 at 14:25
Just a side note: Why do you select on #quick-search-header.widget-title? As #quick-search-header is an ID it would be sufficient to only use that as your selector. — Christofer Eliasson
– Christofer Eliasson, Commented Jul 17, 2012 at 14:25
@Chandu - Thank you, it was givin a 404, which pointed me in the right direction. Even though the image was being added, it was looking at the wrong URL because, unlike the CSS, it was looking from the location of the page I was on, rather than the site root. — David Gard
– David Gard, Commented Jul 17, 2012 at 14:33
@JonTaylor - It wasn't showing the new image (see comment directly above this), and not being particularly familier with jQuery/DOM, it just looked a bit odd being in document.style, so I wasn't sure. Thanks. — David Gard
– David Gard, Commented Jul 17, 2012 at 14:34

Jon Taylor · Accepted Answer · 2012-07-17 14:36:23Z

4

Setting any value via the css('attributename','attributevalue') function in jQuery will add that attribute to the inline style of the element. In the inspector its often labeled element.style

If you need to do this via classes only then you can create a seperate class with the alternate background image in and switch classes by adding/removing classes from the element, this would not appear in the element.style, rather it would just switch the class and that would be displayed in the inspector instead.

You could even use the toggleClass() function which would allow you to toggle a particular or multiple classes on or off.

Docs are as follows:

toggleClass

addClass

removeClass

Or you could even do it by setting an attribute on the element using .attr('class','newClassName');

Up to you.

edited Jul 17, 2012 at 14:36

answered Jul 17, 2012 at 14:25

Jon Taylor

7,9255 gold badges32 silver badges55 bronze badges

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

1 Comment

David Gard Over a year ago

Thank you, the explaination is very helpful, and I did create a second class to switch to as opposed to swapping just the backgournd-image, so everything is now working.

jama · Accepted Answer · 2012-11-22 23:02:35Z

4

make sure the relative path is correct. Check 10 times the relative path against the current location: javascript:

window.location.pathname
Try: first define css as:

.XXX { background-image: url() }

then in javaScript:

backgroundImage = "url('../images/image.png')"; //note single quotes

$(XXX).css("background-image", backgroundImage);
//or
$(XXX).css({"background-image": backgroundImage});

edited Nov 22, 2012 at 23:02

answered Nov 22, 2012 at 16:36

jama

412 bronze badges

Comments

halfer · Accepted Answer · 2023-06-04 15:15:21Z

0

Try;

$('#quick-search-header.widget-title').css({'background-image':'url(dd_includes/images/icons/sliding-menu-arrow-right.gif)'});

edited Jun 4, 2023 at 15:15

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered Jul 17, 2012 at 14:34

Alfred

21.5k64 gold badges175 silver badges258 bronze badges

3 Comments

Jon Taylor Over a year ago

uh well im almost certain that is wrong, the : in the css() function should be a , as it is separating parameters.

Jon Taylor Over a year ago

hmm interesting, ive not seen that syntax used before for this method, I will look into it.

Jon Taylor Over a year ago

I modified your statement as I realised what it was you were doing, you were using the map syntax but you didn't have the { } around the map. See here api.jquery.com/css/#css-map

Collectives™ on Stack Overflow

Changing background image with jQuery is not working

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related