Have you tried adding a background color to your css?

Welcome to WebmasterWorld KathR!

You have two rules defining the background, the second one more specific and only supported by Firefox (not IE). The path to the image is not the same in both, with the first one pointing to ../images/ and the second to images/ .

It is not clear why you need the second rule. If you remove it, does the background show?

Adding to Encyclo's post, if that still does not work, try adding a height to fix it in firefox, something like

height: 100%;

repeat-y 50% 10%;

(Added) height: *px; normally fixes this type of problem in Firefox, but this won't work here cause of the repeat-y, but nice to know for next time.

[edited by: SilverLining at 3:13 pm (utc) on Aug. 15, 2006]

Hi, thank you for your replies.

1. I tried to add a background colour in the CSS for the container div - it did nothing unfortunately

2.I added the 2nd declaration especially for Firefox as it did not work with just the 1st one. The correct path to the image is ../images/bgimage.jpg, but I was trying the other path in desperation!

3. I tried adding height: 100%; to the container div - this just made the bgimage longer in IE but it still didn't appear in Firefox.

I think I must be doing something really stupid! Any more ideas?
Thanks,
Kath

OK, here's a couple more ideas. :)

- Can you load the background image directly in Firefox?
- If you set the position as top left rather than the percentage value, do you see the image?

Thanks for your message.

Yes I can open the background image directly in firefox by typing in it's url

I tried using 'top left' instead of the position in percentages like this:

#container {
width: 780px;
font-family: Arial;
font-size: 0.8em;
background: url(../images/bgimage.jpg) top left repeat-y;
border: 1px solid #e6930f

}
but sadly the image still didn't display in FF - it looked the same as before in IE

Does the JavaScript console report any errors (Tools > JavaScript console)? I know that in Firefox, CSS parsing errors are reported there, so if for some reason there is something in your style sheet that is causing a problem Firefox might not be getting to that line.

Also, you might try installing the following Firefox extensions to help you debug the problem:

Web Developer Toolbar
Firebug

Is there content within #container div? IE will stretch based on font-size without content (increase font-size to see). FF will not.

Neither background or background-image is content (except to IE) so unless you specify a height attribute or provide content a standards compliant browser (such as FF or Opera) will only show the borders (in this instance) collapsed together.

Hi thank you all for your input.
You are right iamlost - I added a footer div at the bottom of my page and now the image shows up in Firefox - hooray! I was using the background image to create a 'faux column' so although I did have some content it did not go down to the bottom of the page, hence why I was using the faux column.
I think I have an awful lot to learn about css still!
Thanks,
Kath

I've run into the same problem KathR. Firefox and Safari don't want to show my background image, but IE does. I am a dreamweaver plug and play kind of programmer (ie a monkey at the keyboard) and I can't identify a problem in the code. The section that refers to the header image reads like this: (look for the Building (1 or 2) shortened.gif files)

/* ----------------- Main content ----------------------*/

#homepic {width:900px; height:164px; margin:5px 0 10px 0;background: url(images//Building 1 shortened.gif) no-repeat;}
#homepic a {color:#fff;}
#homepic:hover {background: url(images//Building 2 shortened.gif) no-repeat;}
.message{ position:absolute; width:360px; float:left; margin:30px 0px 0px 400px; color:#fff;} /*Link in picture*/
#bottomcontenttop{width:900px;height:10px;background: url(images//b_contenttop.jpg) no-repeat;}
#bottomcontent{width:898px; border-right:1px solid #c5c5c5;border-left:1px solid #c5c5c5;}
#bottomcontentbtm{width:900px;height:10px;background: url(images//b_contentbtm.jpg) no-repeat;}

#sidebar-left {float: right;width: 270px;margin: 0 6px 5px 0; padding:10px;}
#main {float: right;width: 270px;margin: 0 6px 5px 0; padding:10px;}
#sidebar-right {float: right;width: 270px;margin: 0 6px 5px 0; padding:10px;}
*/
.thumbs img{position:relative;padding:1px;margin:5px 8px 5px 9px;border:2px solid #F3962D;background:none;}
.thumbs img:hover{border:2px solid #c5c5c5; background:none;}

------------------------

Help me! I don't know what to do!

I don't believe it...in a last effort to trouble shoot on my own, I found the solution! I needed to specify the spaces in the file extension with some %signs and numbers. Damn the spaces and firefox/safari for not recognizing them as spaces!

The new functional code looks like this:

#homepic {width:900px; height:164px; margin:5px 0 10px 0;background: url(http://example.com/MRI/themes/template_008_ad_agency/ad_agency/images/Building%201%20shortened.jpg) no-repeat;}
#homepic a {color:#fff;}
#homepic:hover {background: url(http://example.com/MRI/themes/template_008_ad_agency/ad_agency/images/Building%202%20shortened.jpg) no-repeat;}
.message{ position:absolute; width:360px; float:left; margin:30px 0px 0px 400px; color:#fff;} /*Link in picture*/
#bottomcontenttop{width:900px;height:10px;background: url(images//b_contenttop.jpg) no-repeat;}
#bottomcontent{width:898px; border-right:1px solid #c5c5c5;border-left:1px solid #c5c5c5;}
#bottomcontentbtm{width:900px;height:10px;background: url(images//b_contentbtm.jpg) no-repeat;}

#sidebar-left {float: right;width: 270px;margin: 0 6px 5px 0; padding:10px;}
#main {float: right;width: 270px;margin: 0 6px 5px 0; padding:10px;}
#sidebar-right {float: right;width: 270px;margin: 0 6px 5px 0; padding:10px;}
*/
.thumbs img{position:relative;padding:1px;margin:5px 8px 5px 9px;border:2px solid #F3962D;background:none;}
.thumbs img:hover{border:2px solid #c5c5c5; background:none;}

I hope this helps someone out there that ran into the same problem!

Ciao!

[edited by: SuzyUK at 4:21 pm (utc) on July 7, 2008]
[edit reason] examplified URI's [/edit]

Hey man... I am new to this site. I was searching around on the internet for the answer on how to fix the same problem! After tweaking things for a little while, I noticed that when I loaded my website in firefox that in the address bar it had a percent sign in where I had some spaces. When I went to my server, and I renamed the background image so that it didn't have any spaces, it worked like a charm! Hope this helps!