CSS Image Positioning

Question

Hi All,

Say I have an image that has a width of 2000px. The snazzy design part of my image starts at about 600px in and is 900px wide or so. What I want to do is to use this image as the background on a website and have the snazzy design centered and when you stretch the browser window, reveal the entire image still keeping the snazzy design centered. How can I do this? Also, putting the snazzy part in it's own layer above the background is not an option.

Thanks

Answer 1

You can center the background image using the CSS background-position attribute:

background-position: top center;

Answer 2

To add to Guffa's answer, you can also use percentage and pixel values to position your background image:

/* Centered vertically, 200px down from the top of the page  */
background-position: 50% 200px;

/* 30px from the left edge, -10px from the top (shifted up beyond the top)  */
background-position: 30px -10px;