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