How do I keep a centered background image from breaking the layout?

Question

http://www.goodshow.tv

I'm having issues with the background image. The layout looks right if the browser is wide enough, but when you make it too narrow, the background keeps moving off to the left. Is there a way to keep it from moving?

Answer 1

I wonder if this is related to using both body and #body css selectors (one for the tag called body and one for the div named body

Is the intent that the nav area has a white background and the #content div has the image background?

Could you try this instead of what you have?:

body {
    margin: 0px;
    padding: 0px;
}
#content {
    background-color: #333;
    background-image: url(../images/bg.png);
    background-repeat: repeat-y;
    background-position: center;
    float: right;
    width: 720px;
    padding-top: 35px;
    padding-left: 0px;
}

Answer 2

Can't you just encapsulate the entire left side with a white background div?

Answer 3

I think the problem is that both the nav and content areas are floating, and the content has an absolute width.

Quickest fix is the set the background-color on #nav to white. This will still cause issues for the header (Good Show, and A creative studio in Atlanta) but I think you need to revisit how you are doing that portion anyway (they are just 2 images)

Probably better to have 2 columns all the way to the top and those images can be in a fixed-height div in the top of each

Answer 4

Remove the white portion from the background image, and make the left sidebar background white with CSS's background rule. Add the image to the right portion only. Maintain the width of the left sidebar.

Answer 5

This problem is happening when the page width gets less than that of the <div id="body"> div, causing that div to no longer be centered. I found that I was able to solve this on Firefox at least by adding:

html { min-width: 980px }