title: How to add a div as a background for another?
body: <p>My goal is to dynamically generate background images for divs.</p>
  
  <p>I've got a function that:</p>
  
  <ul>
  <li>Draws an image on canvas;</li>
  <li>Gets data URL of the image;</li>
  <li>Creates a <code>bgDiv</code> with the image as background;</li>
  <li>Prepends the <code>bgDiv</code> to a given <code>div</code> element.</li>
  </ul>
  
  <p>Here's the code of the 3rd and 4th points:</p>
  
  <pre><code>var bgDiv = document.createElement('div');
  $(bgDiv).css({
      position: 'absolute',
      left: '0px',
      top: '0px',
      width: '100%',
      height: '100%',
      background: 'url(' + url + ')',
  });
  $(div).prepend(bgDiv);
  </code></pre>
  
  <p>The problem is: the <code>bgDiv</code> is drawn in front of children of <code>div</code>. I've figured out this is because of the <code>position: absolute</code> property, which is set on <code>bgDiv</code> while regular children in my case have no <code>position</code> set.</p>
  
  <p>How can I get the <code>bgDiv</code> element to be drawn on the bottom of all children no matter what they are?</p>
  
  <p>&nbsp;</p>
  
  <hr>
  
  <p>Disclaimer: I know that I could just set <code>background-image</code> property of <code>div</code>, but it's not sufficient for my purposes.</p>
  
  <p>&nbsp;</p>
  
  <hr>
  
  <p>I'm testing this in recent Firefox, and I need quite universal solution.</p>