jQuery setting css background image

Question

I am setting backgrounds dynamically using a jQuery script however the .css function does not seem to be working. Here is the script:

$(document).ready(function () {

    $(".VociMenuSportG").each(function () {

        var fullHref = $(this).find('a').attr('href');
        console.log(fullHref);
        var pos = fullHref.indexOf("IDSport=") + 8;
        console.log(pos);
        var sportNum = fullHref.substr(pos, 3);
        console.log(sportNum);
        var imageName;

        switch (sportNum.toString()) {

            case '523':
                imageName = "../Images/soccer_ball01.png";
                break;
            case '468':
                imageName = "../Images/soccer_ball01.png";
                break;
        }

        console.log(imageName);
        $(this).css('background-image', 'url (' + imageName + ')');

    });
});

The script runs through each item (VociMenuSportG), finds the path of the link in the list item and then sets the background image of the list item. The script successfully runs with no errors and using the console.logs I can see the correct path is chosen. But the background-image simply does not set ? I am wondering if I am maybe using the .css function incorrectly somehow ??

EDIT

Tried setting the paths of the images to absolute paths rather than relative ones but still no luck

If you inspect the element, does it have the background-image present in it's styling? — Darren
– Darren, Commented Jul 21, 2014 at 7:55
Have you checked what is there in this element and you don't have any console error log while running ? — Ashok Rathod
– Ashok Rathod, Commented Jul 21, 2014 at 7:56
No it doesn't, which is why I came to the conclusion that I might be using the function wrong or if there is maybe a specific way background-images have to be set in jQuery — Michael
– Michael, Commented Jul 21, 2014 at 7:57
Theres no error logs and the console output shows me that all the variables contain what they should — Michael
– Michael, Commented Jul 21, 2014 at 7:58
Try this $(this).css({ backgroundImage: 'url("'+ imageName +'")' }); — Milan and Friends
– Milan and Friends, Commented Jul 21, 2014 at 8:01

Suresh Ponnukalai · Accepted Answer · 2014-07-21 08:04:20Z

2

The issue in your case is space between url and (. Remove the space it will work.

 $(this).css('background-image', 'url(' + imageName + ')');

answered Jul 21, 2014 at 8:04

Suresh Ponnukalai

14k5 gold badges36 silver badges54 bronze badges

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

Comments

vrijdenker · Accepted Answer · 2014-07-21 08:07:30Z

0

I'm not sure what's wrong, but first of all try to set another css property and see if that works.

For example: Css('border', '1px solid red')

Also I spotted a space between 'url' and '('. Maybe that doesn't work?

If it doesn't: have you tried setting the property manually from the browser-debug-toolbar to test if the URL you use is in fact the right one? The fact that you use '../' in your url makes me doubt. The ../ is often being used in css files to point from /css to /images for example. But in this case you are not in /css. So try: '/Images/soccer_ball01.png' for instance.

(Edit: while writing the answer was already posted, but well, maybe this will clarify how to debug next time... :) )

answered Jul 21, 2014 at 8:07

vrijdenker

1,4061 gold badge13 silver badges26 bronze badges

Comments

vahidseo · Accepted Answer · 2014-07-21 08:07:56Z

0

Correct form of using that method is this:

$(this).css( { 'background-image' : 'url(' + imageName + ')' } );

I would give you more info to fix it, if you had created a fiddle.

edited Jul 21, 2014 at 8:07

answered Jul 21, 2014 at 8:01

vahidseo

4611 gold badge4 silver badges16 bronze badges

1 Comment

vahidseo Over a year ago

can you make a fiddle, please?

Artjom B. · Accepted Answer · 2014-07-22 10:54:21Z

0

Suggestion:

You can use background instead of background-image like this way:

$(this).css('background', 'url(' + imageName + ')');

edited Jul 22, 2014 at 10:54

Artjom B.

62k26 gold badges137 silver badges236 bronze badges

answered Jul 22, 2014 at 10:12

Gangadhar Jannu

4,4626 gold badges33 silver badges55 bronze badges

1 Comment

Gangadhar Jannu Over a year ago

@Barnee I've clearly specified my answer as Suggestion. I'm not here to criticize. I have provided the information and I think providing information is not criticizing.

Collectives™ on Stack Overflow

jQuery setting css background image

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related