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.)
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)
Try putting the image name in quotes, e.g.:
background-image: url('image.jpg');
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?
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?
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.
Make sure that the image you are referring to is relative to the css file and not the html file.
try this.
background-color: transparent;
background-image: url("/path/to/image/file.jpg");
background-repeat: repeat;
background-position: top;
background-attachment: scroll;
Sorry this got huge, but it covers two possibilities that consistently happen to me.
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.
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.
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 ;)
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.
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.
I had the same problem.
For some reason, on onse section display: table; worked. On the next section it wont :s
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.