Background image is not displayed in Firefox

Question

An image set as the background of a DIV is displayed in IE, but not in Firefox.

CSS example:

div.something {
background:transparent url(../images/table_column.jpg) repeat scroll 0 0;
}

(The issue is described in many places but haven't seen any conclusive explanation or fix.)

Answer 1

You could try this:

div.something {
background: transparent url(../images/table_column.jpg);
}

The other declarations are shorthand CSS properties, and I afaik they are not needed.
Do you have this online somewhere? I'd like to see if I can fiddle with it a bit. (locally)

Answer 2

I had a similar problem regarding the CSS background-image property in FF. It worked fine in IE but refused to work in FF ;) After reading a few posts I established that the issue was indeed that there was no content in the div except for a table (I was trying to make the background image adjust to the size of the broswer without collapsing or expanding and therefore used a much larger image in the background of the div in order to form a 'cropping' of sorts.) The solution for me it seems was to simply 'cheat' by placing an img tag that displayed a blank .png file that I then re-adjusted to the the correct height of the image with width set to 100%. This worked for my problem, and I hope it helps anyone else who is running into a similar problem. Probably not the best fix, but it's a fix ;)

Answer 3

Instead of using URLs relative to the page/stylesheet, a cross-browser solution is to give a relative URL starting with the application/domain root.

/* Relative to Stylesheet (Works in Firefox) */
background: url('../images/logo.gif');
/* Relative to Page (Works in IE, Chrome etc.) */
background: url('images/logo.gif');
/* Absolute path (Fine, unless you change domains)*/
background: url('http://www.webby.com/myproduct/images/factsheet.gif');
/* Domain Root-relative path (Works in Firefox, IE, Chrome and Opera) */
background: url('/myproduct/images/factsheet.gif');

FYI: As far as I'm concerned, there is no requirement to use quotes in CSS URLs, I've used them here 'cause it looks prettier.

Answer 4

Sorry this got huge, but it covers two possibilities that consistently happen to me.

Possibility 1

You may find the path to the CSS file isn't correct. For example:

Say I have the following file structure:

public/
    css/
        global.css
    images/
        background.jpg
    something/
        index.html
    index.html

On public/index.html the following paths will include the CSS file:

#1:  <link href="./css/global.css"
#2:  <link href="/css/global.css"
#3:  <link href="css/global.css"

However on public/something/index.html number 1 and 3 will fail. If you are using a directory structure like this (or an MVC structure e.g.: http://localhost/controller/action/params) use the second href type.

Firebug's Net monitor tab will tell you if the CSS file can't be included.

On the subject of paths remember that images are relative to the path of the CSS file. So:

url('./images/background.jpg') /* won't work */
url('../images/background.jpg') /* works: ../ == up one level */

Hover over the url() part of the background attribute in Firebug's CSS tab to check if the file's being loaded.

Possibility 2

It could be that the div has no content and thus has a 0 height. Make sure the div has at least a line of something in (e.g.: lorem ipsum delors secorum) or:

div.something {
    display: block; /* for verification */
    min-height: 50px;
    min-width: 50px;
}

Check Firebug's layout tab (of the HTML tab) to check the div has a height/width.

Answer 5

Make sure that the image you are referring to is relative to the css file and not the html file.

Answer 6

My mistake was to use '\' instead of '/'. Worked OK in IE, but not in other browsers.