positioning of background image

**hurricanedan** · Sep 12, 2007, 06:47

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

**Shyflower** · Sep 12, 2007, 07:07

Can you leave a url so people can see what you are trying to accomplish and what is going wrong for you?

A few things that are odd to me are:

1. Why are you using a white background image when you could more easily declare a background-color: #ffffff ?

2. Do you really want your logo inside your white content block?

3. Relative positioning is positioning relative to the parent element. Are you positioning your wrapper relative to the body of your document?

I know none of my questions answer yours, that's why I asked about the url.

**Paul O'B** · Sep 12, 2007, 09:17

Hi,

We'll need to see a real page because the code is working as I would expect and if I change the images to colours then they all line up where I expect, except that the header is 100px from the left because of the margin you added.

**hurricanedan** · Sep 14, 2007, 11:01

I actually found out what I was doing wrong on this. If the ';' is not added the CSS sheet does not display properly. Sorry to bother with the post but thanks for the replies.

Dan

The SitePoint Forums have moved.

User Tag List

Thread: positioning of background image

Thread Tools

Display

Hybrid View

positioning of background image

Bookmarks

Bookmarks

Posting Permissions