CSS - background image margin bottom?

Question

Is it possible?

heres what i got...

<div id="mMid">
    <div id="mBot">
      Content
    </div>
</div>

#mBot {
    background:url(/images/mBot.png) bottom left no-repeat;
    width:  1001px; 
}
#mMid {
    background:url(/images/mMid.png) top left repeat-y;
    width:1001px;
}

mMid is a vertically tiled image. mBot is a png with a folded corner. my problem is that mMid shows through the png of mBot.

can i put like a bottom margin on the mMid bg image? so it stops the 170px from the bottom of the whole div area?

Solution

You can use a separate div, and do some tricks using paddings and margins.

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.

#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;
}

<div id="mMid">
    <div id="mTrick">
      <div id="mBot">
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
        Content<br>
      </div>
    </div>
</div>

Or view jsFiddle