title: How to add a color overlay to a background image?
body: <p>I have seen this question a lot both on SO and the Web. But none of them has been what I am looking for.</p>
  
  <p>How do I add a color-overlay to a background image using CSS only?</p>
  
  <p>Example HTML:</p>
  
  <pre><code>&lt;div class="testclass"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Example CSS:</p>
  
  <pre><code>.testclass {
      background-image: url("../img/img.jpg");
  }
  </code></pre>
  
  <p>Please note:</p>
  
  <ul>
  <li><p>I want to solve this by only using CSS. i.e I do NOT want to add a child div within the div "testclass" for the color overlay.</p></li>
  <li><p>This should not be a "hover effect" I want to simply just add a color-overay to the background image.</p></li>
  <li><p>I want to be able to use opacity i.e. I am looking for a solution that allows RGBA color.</p></li>
  <li><p>I am looking for just one color, lets say black. Not a gradient.</p></li>
  </ul>
  
  <p>Is this possible? (I would be surprised if not, but I have not been able to find anything about this), and if so what the best way to accomplish this? </p>
  
  <p>All suggestions and advice are appreciated!</p>