title: Make background-color overlap background-image without extra HTML
body: <p>Today I'm wondering on how I can get <code>background-color</code> to overlap <code>background-image</code> when using <code>rgba</code>, with a lower opacity value.  But when I try this in FireFox, the image overlaps the color.  I'll show you (below) exactly what I tried:</p>
  
  <pre><code>div {
     background-image: url("http://placehold.it/300x300");
     background-color: rgba(0,0,200,0.5);
  }
  </code></pre>
  
  <p>I'd like it to give a blue tint over the image, but it just shows the background and no blue at all...  Here is a image result of the div:</p>
  
  <p><img src="https://i.stack.imgur.com/VTJkh.gif" alt="enter image description here"></p>
  
  <p>But the desired effect should look like this (below):</p>
  
  <p><img src="https://i.stack.imgur.com/gbU8c.png" alt="enter image description here"></p>
  
  <p>How would I get this desired effect without using any extra HTML in the process?</p>
  
  <hr>
  
  <p><code>EXTRA</code></p>
  
  <p><a href="http://jsfiddle.net/TzRCv/2/" rel="nofollow noreferrer">JSFiddle</a></p>