FIXED CENTERED BACKGROUND with semi-transparent background in a Div container

Reference site for background color and background image properties see Sitepoint Reference Guide

  1. The background is centered and blends in with the chosen colour background.
  2. I have set the page background as a fixed attachment, so that it is fixed in place at the position it has been given. This gives the appears that this content div appears to scroll up and down the page.
    3. body {	
background:url(bg-grunge-apricot.jpg) no-repeat;
background-attachment:fixed;
background-position:top center;
background-color: #B05914;
}
  3. The table uses a semi-transparent image inside the table so that page background can still be slightly visible under the table content.
    4. 
#maintable {
width: 880px;
margin: 50px auto;
border: 2px solid black;
background: url(transparent.png) repeat;
}
  4. The content area transparency will show in all the latest browsers, except for IE6. You will need to apply a IE png transparency fix to make this work in IE6 (and lower).
  5. Instructions can be found here: Make sure you follow the step in the:

    How to Include PNG Transparency in IE6

VIEW THE SOURCE CODE OF THIS PAGE TO SEE HOW IT HAS BEEN PUT TOGETHER.

THE SAME PRINCIPLE CAN BE APPLIED TO A TABLE. VIEW SAMPLE HERE

 

Back to Tutorials ListUnique CSS Templates