 <p><strong>Updated Answer</strong>: I still have spent way too much time on this :-), especially when it ended up so simple. <em>It allows for a background to be sized based on the height of the container</em>, which seems to be different than yunzen's solution. <strong>Now does use <code>margin: 0 auto;</code></strong>. Still grows with container height.</p> <p><a href="http://jsfiddle.net/CNxCb/219/"><strong>View the new answer.</strong></a></p> <p>You can <a href="http://jsfiddle.net/CNxCb/214/"><strong>view the original, more complex answer</strong></a> which does not use <code>auto</code> margin. </p> <h2>HTML:</h2> <pre><code>&lt;div id="Bkg"&gt; &lt;div id="Content"&gt;Content goes here. &lt;/div&gt; &lt;/div&gt; </code></pre> <h2>CSS:</h2> <pre><code>#Bkg { width: 100%; min-width: 300px; /* equals width of content */ background:url('http://dummyimage.com/400x20/ffff00/000000&amp;text=Center') repeat-y top center; padding-bottom: 50px; } #Content { width: 300px; margin: 0 auto; } </code></pre>