Because the floated element is both within and without the flow, thissort of thing is bound to happen. What's going on? Well, thecontent of the paragraphs is being "displaced" by thefloated element. However, each paragraph's element width isstill as wide as its parent element. Therefore, its content areaspans the width of the parent, and so does the background. The actualcontent doesn't flow all the way across its own content area inorder to avoid being obscured behind the floating element.
It has been argued that all foreground content is always shown"in front of " all background content, and the behaviorof floated elements seems to support this interpretation. On theother hand, the CSS2 property z-index makes thisreasoning more complicated. As of this writing, implementations havenot yet advanced sufficiently to test this out, and the CSS2for that element. It is theoretically possible to create "aligned" backgrounds in multiple elements using this property; see Chapter 6, "Colors and Backgrounds", for more details.
BODY {background-attachment: scroll;}
DIV.fixbg {background-attachment: fixed;}