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

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 eg: 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 (eg: 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 2

Strangely enough, after smashing my head on the keyboard for hours, I added display:table; to the DIV's style and the background image magically appeared in FF.

Answer 3

It looks like a background-attachment issue. It needs to be set to fixed (not scroll) to work in FF. See: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position

Answer 4

旧帖子，但我只是有一个类似的问题图像未显示在 Firefox 中，结果是广告块附加组件，必须更改我的图像名称

Answer 5

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 6

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 7

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 8

尝试将图像名称放在引号中，例如：

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

Answer 9

确保您引用的图像是相对于 css 文件而不是 html 文件的。

Answer 10

try this.

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

Answer 11

I've had a similar issue. The reason is that firefox is sensitive for missing fields in your css. Chrome will (sometimes) auto complete missing field, thus the issue appears on your firefox browser.

You need to add a display type, because right now it is being translated to 0 height.

In my case:

.left-bg-image {
    display: block; // add this line

    background-image: url('../images/profile.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    opacity: .6;
    min-width: 100%;
    min-height: 100vh;
}

Answer 12

I solved a similar problem by renaming the CSS class. MSIE allows CSS class IDs to begin with numbers; Firefox doesn't. I had created a class using the width of the image in pixels eg .1594px-01a

I actually knew it was non-standard syntax but since it was working fine in MSIE I had forgotten about it. After trying all the other stuff it finally dawned on me that it could be a simple as the naming, and as soon as I put a letter in front of the class, presto!

Answer 13

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 14

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

Answer 15

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 16

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 17

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 18

(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 …)

Answer 19

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 20

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?

Answer 21

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 22

There's this HTML 'base' tag like in

<head>
   <base href="http://example.com/some/bizarre/directory"/>
</head>

If this is present in your page, the image for the url is not relative to your current url, but to the given base url. I wouldn't know why IE displays it and Firefox doesn't, though.

The Webdeveloper Firefox extension provides the option to "Display broken images" - this may come in handy. Also, you might try " Live Http Headers " to see if/what image is requested and what the return code is.

Answer 23

Nobody mentioned background-origin so there you go :

background-image:url('dead.beef');
background-size: 100% 100%;
background-origin:border-box;

Solved the problem for me ; my background apparently was outside my div.

Answer 24

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 25

In my case it caused by "Strict" mode in FF Privacy & Security settings. After I have changed to "Standard" all background images had become visible.

Answer 26

This worked for me:

1) Click on the background image table.
2) Right click on the status bar at the bottom of the page.
3) Click Inline styles.
4) Click the Background styles tab.
5) If you see 'Transparent' in the colour title, that is the problem.
6) Click the colour box and select a colour (white is a good choice.)
7) The colour title should now read white.
8) Click OK.
9) Save the page.
10) Upload the page and overwrite the existing file.
11) Refresh the page and your background picture will display.

Note: Please ensure that you have uploaded your background picture jpeg. I forgot to upload the background jpeg once and spent ages trying to sort it before I realised my error.

Regards

Martin