 <p>You can use a separate div, and do some tricks using paddings and margins. </p> <p>In the fiddle, the blue div is the 'Mid' div, and the red div is the content div. They still have the same side and position. The green div is a trick, and is lowered 170px. Now, when you give the green div a background instead of mMid, the background should be lowered 170px relative to the content div.</p> <p><div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#mMid { width:1001px; border: 1px solid blue; padding-top: 170px; } #mTrick { border: 1px solid green; background:url(/images/mMid.png) top left repeat-y; } #mBot { background:url(/images/mBot.png) bottom left no-repeat; /* width: 1001px; not needed. It will borrow the size from it's parent */ border: 1px solid red; margin-top: -170px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="mMid"&gt; &lt;div id="mTrick"&gt; &lt;div id="mBot"&gt; Content&lt;br&gt; Content&lt;br&gt; Content&lt;br&gt; Content&lt;br&gt; Content&lt;br&gt; Content&lt;br&gt; Content&lt;br&gt; Content&lt;br&gt; Content&lt;br&gt; Content&lt;br&gt; Content&lt;br&gt; Content&lt;br&gt; Content&lt;br&gt; Content&lt;br&gt; Content&lt;br&gt; Content&lt;br&gt; Content&lt;br&gt; Content&lt;br&gt; Content&lt;br&gt; Content&lt;br&gt; Content&lt;br&gt; Content&lt;br&gt; Content&lt;br&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p> <p><a href="http://jsfiddle.net/GolezTrol/N3z8S/1/" rel="nofollow">Or view jsFiddle</a></p>