It really depends on the site design. I find the following works for me when the header, footer and body content area all have the same width;
HTML
Code:
<div class="header">
<div class="holder">
<!--- header content goes here --->
</div>
</div>
<div class="bodycont">
<div class="holder">
<!--- body content content goes here --->
</div>
</div>
<div class="footer">
<div class="holder">
<!--- footer content goes here --->
</div>
</div>
CSS
Code:
div.holder {
margin:0 auto;
width:860px; /* this should be the width you want to center */}
div.header {
background-color:#ffffff; /* this should be set to a color that gracefully transitions from your image */
background-image:url('../images/header-bg.gif');
background-position:top left;
background-repeat:repeat-x;}
div.bodycont {
background-color:#ffffff; /* this should be set to a color that gracefully transitions from your image */
background-image:url('../images/bodycont-bg.gif');
background-position:top left;
background-repeat:repeat-x;}
div.footer {
background-color:#ffffff; /* this should be set to a color that gracefully transitions from your image */
background-image:url('../images/footer-bg.gif');
background-position:top left;
background-repeat:repeat-x;}
This will repeat a different image for each divider across the entire width of the browser. If you only want to assign images to the inner area and leave the areas outside of your fixed width area the same as the
body background you can use something like this.
CSS
Code:
div.header div.holder {
background-color:#ffffff; /* this should be set to a color that gracefully transitions from your image */
background-image:url('../images/header-bg.gif');
background-position:top left;
background-repeat:repeat-x;}
Not sure what is with the hostility from the other guys, but everyone has to start somewhere.