Example 4

I have no set the CSS background position to both elements to center - this means that both backgrounds will tile from the center of the page.

Almost there - we just need to tweak the margins so that the two backgrounds line up.

back | css | example 1 | example 2 | example 3 | example 4 | example 5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce arcu ipsum, sollicitudin vel, fermentum ut, commodo sed, est. Fusce ac ligula sit amet eros commodo convallis. Cras tincidunt dolor eget arcu. Donec leo. Quisque sed nulla. Proin quis augue. Praesent id massa non nisl congue posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi pede. Nunc justo pede, auctor vulputate, feugiat nec, egestas in, arcu. Nunc malesuada tempor neque. Suspendisse potenti. Donec vel velit ut eros tristique sodales. Donec mattis.

Aliquam erat volutpat. Mauris fermentum, sem quis imperdiet tempor, felis mauris fringilla lectus, in aliquam lectus quam ut pede. Fusce id elit. Vivamus luctus consequat orci. Phasellus semper augue hendrerit lectus. Aenean vel elit. Aliquam lacus velit, blandit quis, pretium a, semper vel, elit. Maecenas sed odio. Proin libero eros, condimentum id, tempus et, varius fringilla, lectus. Aliquam erat volutpat. Vestibulum viverra pellentesque lacus. Duis faucibus tortor eget nisi. Nulla tincidunt risus non justo.

In mollis bibendum arcu. In semper mi in pede. Praesent iaculis facilisis neque. Donec feugiat bibendum arcu. Sed malesuada. Integer iaculis volutpat velit. Suspendisse risus. In hac habitasse platea dictumst. Praesent a ante sed nisl adipiscing dignissim. Fusce diam arcu, interdum nec, pharetra non, lobortis sit amet, massa. Pellentesque tempus, mauris a molestie mollis, dolor enim bibendum justo, dignissim gravida nunc quam nec nisl. Aliquam in elit. Sed rhoncus mauris eget mauris interdum blandit. Fusce dolor pede, fermentum ullamcorper, tincidunt ac, pellentesque et, nulla. Nullam consequat tristique diam. Nulla quis ipsum.

CSS

<style>
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
/* background: #000000 url(/dev/daisy.gif) ; */
background: #ffffff url(/wp-content/themes/default/images/butterfly.gif);
background-position: center top;
color: #333;

}

#container {
margin: 42px auto 20px auto;
padding: 10px;

background: #ffffff url(/wp-content/themes/default/images/10_butterfly.gif);
background-position: center top;
width: 600px;
}
.fleft {float: left;}
</style>