I have a script that picks a random background image for the body element of my document from a directory called bg-images. If the chosen background image has "_dark" in the image file name, I would like to add a special class to the body element.

Here is the jQuery I'm using. It works great in Chrome & Safari, but does nothing in Firefox:

    var backgroundImage = $('body').css('background');
    var isitdark = "_dark";

    if (backgroundImage.indexOf( isitdark ) != -1 ) {
        $('body').addClass("dark");
    } else {
        $('body').removeClass("dark");
    }

How e this doesn't do anything in Firefox? Is there a better way of writing it?

I've tried adding "type=text/javascript" to all my script tags but that doesn't seem to help and the rest of the jQuery on my site works correctly in all browsers.

I have a script that picks a random background image for the body element of my document from a directory called bg-images. If the chosen background image has "_dark" in the image file name, I would like to add a special class to the body element.

Here is the jQuery I'm using. It works great in Chrome & Safari, but does nothing in Firefox:

    var backgroundImage = $('body').css('background');
    var isitdark = "_dark";

    if (backgroundImage.indexOf( isitdark ) != -1 ) {
        $('body').addClass("dark");
    } else {
        $('body').removeClass("dark");
    }

How e this doesn't do anything in Firefox? Is there a better way of writing it?

I've tried adding "type=text/javascript" to all my script tags but that doesn't seem to help and the rest of the jQuery on my site works correctly in all browsers.

• javascript
• jquery
• firefox
• addclass

Share Improve this question Follow asked Oct 20, 2013 at 21:19 Danny CooperDanny Cooper 35511 gold badge88 silver badges2525 bronze badges 13

• 2 I don't know what the problem is, but try using triple equality(!==) when paring the result from indexOf. These kinds of things are prone to cause strange behaviour. You should always use === in any case. – Hugo Tunius Commented Oct 20, 2013 at 21:21
• 3 @HugoT the .indexOf() method always returns a numeric result, so !== won't make a difference here. – Pointy Commented Oct 20, 2013 at 21:22
• 2 Have you tried using console.log() to show what that "backgroundImage" variable actually contains? – Pointy Commented Oct 20, 2013 at 21:23
• 2 You will have to see what the value of backgroundImage actually is here to see why it isn't working. Nothing else we can do without that info. This is standard debugging. – jfriend00 Commented Oct 20, 2013 at 21:28
• 2 @christophe: "That is what Firefox logs: "TypeError: $(...).css is not a function"" Where did you get that? It makes no sense. jQuery's $ function always returns a jQuery object. It may be a zero-element set, but it has the jQuery functions on it. – T.J. Crowder Commented Oct 20, 2013 at 21:44

 |  Show 8 more ments

2 Answers 2

Sorted by: Reset to default 4

You're not getting the background image with $('body').css('background'); Use .css('background-image')

var backgroundImage = $('body').css('background-image');

It's not necessary because the string _dark will or will not be there but if you want to you can remove the url() or url("")

var backgroundImage = /url\(\s*(['"]?)(.*?)\1\s*\)/g.exec($('body').css('background-image'))[2];

Works fine in FF

http://jsfiddle/mNX3A/

background is a shorthand property. Shorthand properties are not guaranteed to be retrieved correctly with css:

Retrieval of shorthand CSS properties (e.g., margin, background, border), although functional with some browsers, is not guaranteed.

If you specifically want to get background-image, get background-image:

var backgroundImage = $('body').css('background-image');