Question

i want a background image that is larger than the content, which will remain centered with the content, but will not affect the layout (meaning no scrollbars to accomodate the background image). the content must be centered using margin: auto; so that the left side will remain flush with the left side of the viewpane, when the viewpane becomes smaller than the content.

I have seen this question asked several times, and have tried quite a few solutions, but none of the accepted answers have actually worked.

Edit to Clarify

This question is still a bit murkey, so I will attempt to clarify with some images showing what I need. In these images, green is the background image, red is the main content, and blue is the browser’s viewpane.

A: When the viewpane is smaller than both the background image and the main content, the left side of the content remains flush with the left side of the viewpane, the background image remains centered to the main content, the viewpanes scrollbars will only scroll out to the right edge of the main content (and not to the right edge of the background).

B: When the viewpane is larger than both the background image and content, both remain centered to the viewpane.

C: When the viewpane is the same size as the main content, the background image should remain centered to the main content, no scrollbars should be present.

Answer 1

Updated Answer: I still have spent way too much time on this :-), especially when it ended up so simple. It allows for a background to be sized based on the height of the container, which seems to be different than yunzen’s solution. Now does use margin: 0 auto;. Still grows with container height.

View the new answer.

You can view the original, more complex answer which does not use auto margin.

HTML:

<div id="Bkg">
   <div id="Content">Content goes here. </div>
</div>

CSS:

#Bkg {
    width: 100%;
    min-width: 300px; /* equals width of content */
    background:url('http://dummyimage.com/400x20/ffff00/000000&text=Center') repeat-y top center;
    padding-bottom: 50px;
}

#Content {
    width: 300px;
    margin: 0 auto; 
}