There may be a simple mistake I'm making, as everything looks fine in Chrome/FF but breaks in IE8 (I haven't tested other versions).
I have set a background for the body tag with a specified background position. Here is the HTML code:
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<style>
body {
background:#fff url(skyhouse.jpg);
background-position: bottom left;
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div style="width: 100%;float: left;">
<div style="background-color: yellow;height: 400px;width: 400px;">
</div>
</div>
</body>
</html>
When I have a floated div immediately following the body tag, I notice that the background does not display correctly.
Div floated left, width 100%
Div floated left, width 80%
Removing the float or setting the margin to auto fixes the background rendering issue.
Float removed
If I eliminate the background positioning, the background displays properly regardless of floats.
Background position removed
I'm unsure what could be causing this problem.