I have been trying to create a website that uses "hats" similar to what MTV.com uses.

Basically i want a background in the back, when you shrink the browser it remains relative to the content.

I have all the content under 1 div called container. I tried adding the pic to the background, but i just get two entirely different positions when you move the image. The background stays fixed, while the content moves. In different screen sizes the position of the background is way off.

Anyone know how mtv.com does it?

it's a very wide background image (1600px) positioned at 50% width, 0px from viewport top.

background: #1f1f1f url(/sitewide/images/u/hats/wireframe_hat.jpg) no-repeat 50% 0;

wow, great that was it! Thanks for the help!