CSS: repeating background with overflow on top instead of bottom

Is there a way to let the repeating background 'start' fixed at the bottom of the div and overflow on the top? (the other way round than default)

Small example to show what I'm trying to accomplish. The red lines on the image below are the (horizontal) borders between several divs. The middle div is used as a transition between the upper and lower one, with a single non-repeating image. The background of the lower div consists of a repeating darker image with a paper hole, resulting in the paper border seen below.

Now the upper div (with sizable content) should have a repeating background image starting at the bottom and repeating upwards. This for maintaining the correct distance ratio between the holes instead of ending up with a smaller distance or even a partial hole in the 'paper border'.

开发者_开发百科Preferably it should be compatible with method 4 of equal height columns, but I don't see a problem there.

Just make sure you set background-position: right bottom; to the top div, and the background image should start from the bottom and "overflow" out the top.

Example in shorthand:

.my-div {
    background:#fff url(my-bg.png) right bottom repeat;
}

Some reference in case you'd like to explore this further:
http://reference.sitepoint.com/css/background-position