Centering Background with CSS
I was playing around with WordPress trying to create a theme where the blog posts would not use a lot of screen space. I wanted to keep the content and background (wallpaper) image centered on the screen no matter what size the browser window was.
This is fairly simple to do, after you take a few things into consideration.
If you plan to use a fixed width layout for the page's content, you will want your background image to act as a frame for the content, and will most likely keep the overall width of the image small.
If you plan to use a fluid layout, (one that expands to 100% of the screen size), and plan to design for higher resolutions, (e.g.- 800x600, 1024x768 or higher), you can create an image that is 1600 pixels wide (or wider) and the same CSS will ignore the extra width that isn't used. Be sure to keep the key elements of the design centered in the middle 800 to 1000 pixels.
Here's a screen shot of the "virtual iphone" I wanted to create. It was done as a WordPress theme to create a micro-blog.
The CSS to center a background image is very simple:
