background image and color problem in firefox, but good in IE...

[spewn]

hi!

i have a background image that i display on my site...it's 800 in height, and once it ends, the color of the background takes over.

this works in IE, but i just noticed in firefox, once the background image stops, the color is white.

here's my css:

body {
margin:0px;
background-color:#666666;
background:url('e-bg.gif');
background-repeat: repeat-x;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
color:#000000;
}

also, in the body tag, i have bgcolor=666666.

like i said, in IE it's fine, but not sure what i'm doing wrong with rendering in firefox.

any ideas?

 

[Vragabond]

Remove the bgcolor attribute in HTML, that is ignored because you're overriding it with CSS.

Then look at your CSS. You're using specific background properties (like background-color and background-repeat) and then you also use a shorthand background property. The shorthand redefines everything in background that was set before with new options. Background shorthand is composed as such:

.selector {
  background: color image position repeat;
}

Given that you're not setting anything but the image in your shorthand reverts everything else to default (transparent color, repeat-both and top left position).

You could either:

1. Move your background-color under your background shorthand.
2. Specify background-image instead of the shorthand background for the image declaration.
3. Move your background-color (and repeat) in the background shorthand:

background: #666 url(e-bg.gif) repeat-x;

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]