title: Nested div background animation appears above parent background image
body: <p>I have a div with a background image.</p>
  
  <p>Inside this div, I have another div, that has an animation on its scale and opacity, and it makes kind of a ripple effect around the parent image.</p>
  
  <pre><code>&lt;div class="image"&gt;
     &lt;div class="ripple"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The image has a fixed positioning, because it supposed to be at the top of the screen. The ripple div has an absolute positioning (can be also relative), and the animation should start from the center of the image.</p>
  
  <p>The problem is that the nested div animation appears above the parent div. I want the image to be at the top, and the animation behind it.</p>
  
  <p>I've tried different solutions, including z-indexes, and negative z-index, but it looks the same.</p>
  
  <p>Demo for the problem: <a href="http://jsfiddle.net/m271h3s6/1/" rel="nofollow">http://jsfiddle.net/m271h3s6/1/</a>.</p>
  
  <p>You can see in the demo that the black circle appears above google's logo. I want the logo to be always above the animation.</p>