Centering a page... so close... please help

Question

Hi-
I have been trying to center my page for like 2 months. I've come really close but still don't have it right. I attached an external CSS with a wrapper to my existing styles sheet to my template and most of the page centers except the background image. The background image is under my body tag and added as a background image in the definition box. Under that same menue, I set the image to top and center. This seemed to fix the problem when I first open the page in Firefox. It looks centered but when I adjust the browser window, the background image shifts. What am I missing? My site is http://www.DiLynnRing.com   Thanks guys!

Answer 1

I think you are probably misunderstanding what Gary is suggesting. I have had a look at your wrapper.css. The closing curly brace is missing from it.
However, the reason the background image moves when you resize the browser window is because it's attached to the body with background-position: center top;. When the body gets smaller than a particular size, the browser repositions the image to keep it centered in the body. You can get around this by doing what Gary suggested: putting the background image in the #wrapper style rule:
#wrapper {
  margin-right: auto;
  margin-left: auto;
  width: 955px;
  background-image: url(photoshop_sliced_exports/background_photo.jpg);
  background-repeat: no-repeat;