title: CSS3 Background with Gradient Overlay - Gradient only working in Firefox
body: <p>I'm trying to overlay a CSS gradient on a background image. I've got it working in Firefox, but in safari and chrome I only get the background image, without a gradient.</p>
  
  <p>(I generated the gradient code using <a href="http://www.colorzilla.com/gradient-editor/" rel="nofollow">http://www.colorzilla.com/gradient-editor/</a>, then simply added url() at the end of each line) </p>
  
  <p><strong>Update:</strong> seems my problem might be that webkit displays the gradient behind the image, not on top like I need, and firefox does.</p>
  
  <pre><code>  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(99, 130, 169, 0.7) 100%), url(app/bg.jpg) no-repeat center center fixed; /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0, 0, 0, 0)), color-stop(100%, rgba(99, 130, 169, 0.7))), url(app/bg.jpg) no-repeat center center fixed; /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(0,0,0,0.16) 100%), url(app/bg.jpg) no-repeat center center fixed; /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(99, 130, 169, 0.7) 100%), url(app/bg.jpg) no-repeat center center fixed; /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(99, 130, 169, 0.7) 100%), url(app/bg.jpg) no-repeat center center fixed; /* IE10+ */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%,rgba(99, 130, 169, 0.7) 100%), url(app/bg.jpg) no-repeat center center fixed; /* W3C */
  </code></pre>