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

Old post but I just Had a similar problem images not showing up in Firefox turns out it was Ad-block add-on, had to change the names of my images

Answer 2

Happend with me. The jpg does shows in IE but not in Firefox or Chrome. Here is the solution

Change the following css for the element where image is displayed. It can be span, div or any other element :

display:block

Answer 3

For those, who encounter the problem in FF, but not in Chrome:

You could mistakenly mix between different value types for the position.

For example,

background: transparent url("/my/image.png") right 60%  no-repeat;

Will make this error. The fix could be:

background: transparent url("/my/image.png") 100% 60%  no-repeat;

Answer 4

For me, it was a matter of the file-name being case-sensitive. I'm not sure if it was CSS or if it was my Ubuntu operating system, or if it was firefox, but the way that I finally got the background images to display was by referring to BlueGrad.jpg instead of bluegrad.jpg. The former of the two is how it was saved. I didn't think it would be case sensitive, but it was.

Answer 5

Are you absolutely sure the image is a JPG file and not a PNG/Other file?

I'm wondering if IE is letting you get away with something other browsers are not.

Likewise, is the files case exactly as specified?

Answer 6

(It doesn't seem like these are the exact circumstances as of the OP but the issue is somewhat related and I've found a workaround for that which I want to share)

I've had the same problem – background-image visible everywhere except in Firefox – and for me, the issue had to do with the fact that I'm working on a browser add-on.

I'm injecting a file style.css in the pageMod module with the contentStyleFile attribute. In it, there's the rule background-image: url(/img/editlist.png); where I'm referencing an image file external to the add-on. The problem here is that Firefox, unlike other browsers, misinterprets this external domain root as the add-on's internal root!

The css-file is a 1:1 port from the Chrome version of the extension/add-on, so I didn't want to mess around with it. That's why I've added an additional contentStyle rule in combination with a copy of that image in my resource folder. This rule simply overwrites the rule inside the css-file.

(In hindsight maybe even a more elegant method than before …)