title: html / css: create hole in a div
body: <p>Essentially what I'm trying to achieve is a hole in the middle of a div. Behind there is a 100% width div that will eventually be a scroller, over the top will again be a 100% width div, but with a hole in the middle to show through the content from underneath. At the minute I've achieved this using a transparent png background image, but the <code>.test</code> div behind will need to be clickable so I'm trying to find a better solution.<br>
  jsFiddle demo: <a href="http://jsfiddle.net/neal_fletcher/vmTHL/1/" rel="nofollow">http://jsfiddle.net/neal_fletcher/vmTHL/1/</a> <br>
  HTML:</p>
  
  <pre><code>&lt;div class="test"&gt;&lt;/div&gt;
  &lt;div class="background-image"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.test {
      position: absolute;
      width: 100%; height: 240px;
      background-color: red;
      top: 0; left: 0;
      z-index: 1;
      cursor: pointer;
  }
  
  .background-image {
      position: absolute; 
      width: 100%; height: 240px; 
      top: 0; left: 0;
      z-index: 2; 
      background-image:url('http://oi42.tinypic.com/2ziwodd.jpg'); 
      background-repeat:no-repeat; background-position:center;"
  }
  </code></pre>
  
  <p>Visually this is what I'm after, but the <code>.test</code> div needs to be clickable too, any suggestions would be greatly appreciated!</p>