Background image is not displayed in Firefox

2019-01-18 19:32发布

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.)

25条回答
ら.Afraid
2楼-- · 2019-01-18 20: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.

查看更多
Evening l夕情丶
3楼-- · 2019-01-18 20:23

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

查看更多
别忘想泡老子
4楼-- · 2019-01-18 20: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.

查看更多
forever°为你锁心
5楼-- · 2019-01-18 20:24

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.

查看更多
The star\"
6楼-- · 2019-01-18 20:24

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;
}
查看更多
叼着烟拽天下
7楼-- · 2019-01-18 20:24

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

查看更多
登录 后发表回答