Hi Adam, yes two background images on the same page. Here is my code:
html {background:url(PhotoshopTutorials/BODYHEADER.gif) repeat-y center top;
/* background: url(PhotoshopTutorials/BODYBg.gif) repeat-y center 360px;*/
width: 1000px;
margin:0 auto;
padding:0;}
body{color: #000;
font: normal 16px Times New Roman, Times, serif;
margin: 0 auto;
padding:0;
width: 800px;}
#wrapper {margin:160px 0 0 0;
padding:0;
background-color:#e7e7e7;
overflow:auto;}
#Header {width: 800px;
height:200px;
/*margin-bottom:3px;*/
padding:0;
border-bottom: 3px solid #333;}
The effect I am trying to achieve is to have the body header image on top and the bodybg image appear directly underneath it.
The top image has a opaque design in it and is split into 2 colours one color on the left and one color on the right. The second image is one solid color on the left and a different solid color on the right to match the top image. And I would like to stack them on top of each other in the html tag.
I have tried making another div in between the html and body tag called "Background" and putting the other background image in there but it didnt work. Thanks for any input you can share!