title: How to Overlap a Parent Div's Background Image Over its Children
body: <p>I want to overlay the background image of a parent div over the content of its children.</p>
  
  <p>What I have in essence is simple:</p>
  
  <pre><code>&lt;div&gt; &lt;!-- has BGImage --&gt;
    &lt;div&gt;
      &lt;div&gt;
        &lt;iframe /&gt; &lt;!-- serves content that needs to be interacted with --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The top parent div has a background image (a silhouette of an ipad) and the content in the iframe is a page serving JQuery Mobile content (it is a mobile preview). I can't have another parent div with absolute positioning using z-index because the content in the iframe must remain fully usable and click-able.</p>
  
  <p>The reason I need this is that the inside edge of the tablet silhouette has a transparent inner border, I need this to soften the edges of the served iframe content.</p>
  
  <p>I hope this is achievable, I put the JavaScript and JQuery tags in the question because I am not shy to using if they need to be, but as always, if I can complete this using CSS then I am all for that.</p>
  
  <p>Mock up JS fiddle basically showing what I have: <a href="http://jsfiddle.net/fQ22A/1/" rel="nofollow noreferrer">http://jsfiddle.net/fQ22A/1/</a></p>
  
  <p>The following image is where I am wanting to go based on the JSFiddle above:</p>
  
  <p><img src="https://i.stack.imgur.com/CbFDO.png" alt="enter image description here"></p>