title: CSS background gradient with image overlay
body: <p>Just a very quick one I'm having a little trouble with - that is, the ordering of background css elements.</p>
  
  <p>I have the following:</p>
  
  <pre><code>background-color: #3C3E89; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#3C3E89, #6265E4); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#3C3E89, #6265E4); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#3C3E89, #6265E4); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#3C3E89, #6265E4); /* Standard syntax */
  background-image: url('../images/logo.png');
  background-size: cover;
  </code></pre>
  
  <p>And for some reason the png - although it has the transparency layer - overrides the linear gradients with which I'd like it to sit on.</p>
  
  <p>I've had a little root around to see what the correct method is for this, tried them, with no luck. I was wondering if anyone had a tried and tested method for overlaying a png on top of a gradient background...</p>
  
  <p>I'm sure everyone will scream at me saying this is a duplicated question - but unless I'm missing something I haven't been able to successfully implement their suggestions.</p>
  
  <p>Update:</p>
  
  <p>I have also tried the following:</p>
  
  <pre><code>background-image:
    -webkit-linear-gradient(#3C3E89, #6265E4), /* For Safari 5.1 to 6.0 */
    -o-linear-gradient(#3C3E89, #6265E4), /* For Opera 11.1 to 12.0 */
    -moz-linear-gradient(#3C3E89, #6265E4), /* For Firefox 3.6 to 15 */
    linear-gradient(#3C3E89, #6265E4), /* Standard HTML Syntax */
    url('../images/logo.png');
  </code></pre>
  
  <p>And...</p>
  
  <pre><code>background:
    -webkit-linear-gradient(#3C3E89, #6265E4), /* For Safari 5.1 to 6.0 */
    -o-linear-gradient(#3C3E89, #6265E4), /* For Opera 11.1 to 12.0 */
    -moz-linear-gradient(#3C3E89, #6265E4), /* For Firefox 3.6 to 15 */
    linear-gradient(#3C3E89, #6265E4), /* Standard HTML Syntax */
    url('../images/logo.png');
  </code></pre>