title: CSS: repeating background with overflow on top instead of bottom
body: <p>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)</p>
  
  <p>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.</p>
  
  <p>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'.</p>
  
  <p><img src="https://i.stack.imgur.com/Bswr8.png" alt="background example"></p>
  
  <p>Preferably it should be compatible with <a href="http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/" rel="nofollow noreferrer">method 4 of equal height columns</a>, but I don't see a problem there.</p>