Background Image Problem

Hey, I am having a problem with a background image. It works fine in ie but doesnt show up in firefox. The thing is the quadbike in the right hand corner
( http://www.alanmonger.co.uk/keypitts )

Here is the css

/* CSS Document */

a {
color:#000066;
text-decoration:none;
font-size:1.4em;
}
a:hover
{
color:#009900;
}
#container
{
width:775px;
position:relative;
background:url("images/quad.jpg") no-repeat bottom right;
}
#images
{
float:right;
margin: 0 10px 0 10px;
width:320px;
height:auto;
border-style:solid;
border-width:1px;
margin-top:5px;
}
#content
{
width:425px;
float:left;
border-left:solid;
border-width:1px;
border-color:#999999;
padding-left:5px;

}
#header
{
width:775px;
background-color:#ffffff;
margin-bottom:15px;
}
a img
{
border:none;
display:block;
}

Thanks for any help :thumbsup:

anybody?

try using this instead:

#container
{
width:775px;
position:relative;
background-image:url("images/quad.jpg");
background-repeat:no-repeat;
}

see if that works.

Unfortunately not... but thanks anyway.

I dont know why but i am also unable to change the color..

hmmm ok, last suggestion...

#container
{
visibility:visible;
position:absolute;
width:900px;
top:12px;
left:12px;
height:200px;
background-image: url(/images/quad.jpg);
background-repeat:no-repeat;
}


Im guessing you know what to do with Width, Top, Left and height?

Still no :( i dont know why its not working properly in ff but perfectly in ie :(

hmmm strange... i my experience its usually the other way around.
When you say "not working properly" is it actually showing something? or is the div not displaying at all? Im guessing container is a div anyway...

i am not sure of the problem, but having no positioning on header div, and with it being same width as container, could the header be blocking the quad background image.. ??

It could be, but if he's used TOP to plot where the div is, there should be no reason its blockin it... but thats if they've used TOP.

They could always use Z-index to force the container infront i suppose.

hmmm, maybe adding. Z-index:10; could do the trick, but personally i dont really use Z-index that much, so im not sure about this.

You need to clear your floats: div#container { overflow: auto; }.

i dont know why its not working properly in ff but perfectly in ieThis is actually a flaw in Internet Explorer’s float model, not the other way around.


Containing Floats (http://www.complexspiral.com/publications/containing-floats/) explains how the float model works.
Clearing Space (http://css-discuss.incutio.com/?page=ClearingSpace) provides a list of methods that can be used to clear floated elements.