Background image problem :(

[/\ndy]

Hey guys, got a small problem with a new website design.

There is a single background image defined in the CSS file which is nested in the body { attribute, for example:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
background: url(../Images/back.png);
background-repeat: no-repeat;
}

Ontop of that I have a very simple CSS layout, with a single header, left column, right column and footer.

Now what i want to do is add another image inside the header div, but everytime i place a new image there, there is always a white background going round the edge the image, which ruins effect of the original background in the body.

Is there anyway to remove this white background, so that the image i place there merges onto it? Am using the slice tool in fireworks, and have made sure that the background is transparent before slicing, so can't understand why it's there

Would it be best to use all images in a single image for the background? then perhaps build the template on top of that? Little unsure.

Thanks for reading.

 

[LiE]

Post up the CSS for the header and link to the site if you have it up. If not, a screenshot will do.

 

[Edward01]

with out looking at your code i'd guess either your using a .png for the transparency and your browser doesn't like it (IE6 maybe) OR your header div is bigger than the image inside the div and rest of the background colour in the div is set to white instead of transparent.

 

[tuckenator]

As mentioned if using IE6 or a browser that struggles displaying transparency then use a gif. You could also tidyup your CSS a little. e.g.

body {
font: 1em Arial, Helvetica, sans-serif;
background: url(../Images/back.png) no-repeat;
}

If you post up your html, I’m sure we can get it sorted no problem.

Tucks