positioning of background image
I am attempting to layer three images in the following html:
HTML Code:
<body>
<div id="wrapper">
<div id="content">
<div id="header">
</div><!--end header-->
</div><!--end content-->
</div><!--end wrapper-->
</body>
I have the following css to position the images:
Code:
#wrapper {
position:relative;
background-image:url(images/background.png);
background-repeat:repeat;
width:800px;
padding-top:25px;
margin-left:auto;
margin-right:auto;
}
#content{
background-image:url(images/largewhitebackground.png);
background-repeat:no-repeat;
background-position:top center;
margin:0;
padding-top:10px;
height:1200px;
}
#header {
background-image:url(images/logo.png);
background-repeat:no-repeat;
height:160px;
background-position:left;
margin-left:100px;
margin-top:-15px;
}
I am not having any issue with the images in wrapper and content lining up correctly but the header image is aligning left to the wrapper (that is why I have the margin left and margin top) I would prefer it align to the left side of the content though.
Any ideas?
Thanks,
Dan
