CODEWITHSUNDEEP
htmlcssbackground
Internet man
Internet man

Reputation: 1155

Background vertically aligned with div

I am trying to create a full width background image that aligns vertically with a centered div. Should I create a wrapper around all the content, or is there another way to do this (without absolute positioning)? Thanks.

alt text http://img229.imageshack.us/img229/7391/99479284.png

EDIT: Sorry if I didn't explain this very well. I've changed the image.

Upvotes: 0

Views: 186

Answers (2)

bitbucket
bitbucket

Reputation: 1307

Background images do not display outside of their containing elements. That doesn't mean that all or part of a background image cannot be positioned outside its element, just that the parts that are outside the element boundary won't be displayed when the page is rendered.

So in short, yes. You'll have to use a wrapper div.

Upvotes: 1

Doug Neiner
Doug Neiner

Reputation: 66201

Yes, you want to use a wrapper:

CSS:

#wrapper { width: 100%; background: url(yourimage.png) left center repeat-x; }
#content { width: 960px; margin: 0 auto; }

HTML:

<div id="wrapper">
   <div id="content">
      My content
   </div>
</div>

Upvotes: 1

Related Questions