Background vertically aligned with div

Question

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.

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

Answer 1

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>

Answer 2

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.