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

Try putting the image name in quotes, e.g.:

background-image: url('image.jpg');

Answer 2

I found two things that were causing this problem:

1. I was using a .tif file which Firefox did not seem to like - I changed to a .png file.
2. I added overflow:auto; to the CSS for the div - display:block; did not work for me.

Answer 3

It may look very weird, but this works for me >

#hwrap {
background-color: #d5b75a;
background: url("..//design/bg_header_daddy.png"), url("..//design/nasty_fabric.png");
background-position: 50% 50%, top left;
background-origin: border-box, border-box;
background-repeat: no-repeat, repeat;
}

Yes, a double dot and double slash ... ??!!?? ... I can't find anything on the internet that reports this strange behaviour.

[edit] I've made a seperate post > https://stackoverflow.com/q/18342019/529802

Answer 4

The only other thing I can think of besides what has already been said is the way the picture was created. If you made/edited the image in Photoshop, make sure you save as Save For Web...

Sometimes if you use a JPG image for Photoshop without saving as a Web image, it may not appear in Firefox. I had that happen a few weeks ago where a graphic artist created a beautiful header for a mini site and it would NOT appear in FF!

Wait...

Try setting a width and height on the div to expand it. It may be a no-content issue in your div.

Answer 5

try this.

background-color: transparent;
background-image: url("/path/to/image/file.jpg");
background-repeat: repeat;
background-position: top;
background-attachment: scroll;

Answer 6

More questions than answers I'm afraid, but they might help you get to the right answer:

Is it possible that you are collapsing the div in Firefox in some way (with some floats or similar)?

Is there any other content in the div to ensure it's large enough to display the image?

Have you installed Firebug and taken a look at the CSS definitions on the page?