Reputation: 503

Background image is not displayed in Firefox

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

Upvotes: 20

Answers (26)

Ukr

Reputation: 2704

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.

Upvotes: 0

Haim

Reputation: 69

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;
}

Upvotes: 2

Erwan Clügairtz

Reputation: 721

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.

Upvotes: 0

ramon22

Reputation: 3628

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

Upvotes: 3

WoodrowShigeru

Reputation: 1594

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

Upvotes: 0

REDFOX

Reputation: 171

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

Upvotes: 0

Stuart

Reputation: 11

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.

Upvotes: 1

Martin

Reputation: 1

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

Upvotes: -1

PeterM

Reputation: 1

I found two things that were causing this problem:

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

Upvotes: 0

a avant

Reputation: 51

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

Upvotes: 5

Riho

Reputation: 4595

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

Upvotes: 0

Randall

Reputation: 11

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 e.g. .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!

Upvotes: 1

valk

Reputation: 9894

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;

Upvotes: 0

Hammad

Reputation: 31

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

Upvotes: 3

Astravagrant

Reputation: 755

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.

Upvotes: 1

Eric

Reputation: 71

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.

Upvotes: 7

tahdhaze09

Reputation: 2213

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.

Upvotes: 0

J. Ryan

Reputation: 1

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

Upvotes: 0

Ross

Reputation: 47057

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.

Upvotes: 16

Mike Geise

Reputation: 825

try this.

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

Upvotes: 1

GateKiller

Reputation: 75969

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

Upvotes: 1

Olaf Kock

Reputation: 48087

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.

Upvotes: 0

scunliffe

Reputation: 63676

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?

Upvotes: 0

Zhaph - Ben Duguid

Reputation: 26976

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?

Upvotes: 0

Philip Morton

Reputation: 131999

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

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

Upvotes: 2

Kablam

Reputation: 2601

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)

Upvotes: 0

Background image is not displayed in Firefox

Answers (26)

Possibility 1

Possibility 2

Related Questions