title: How to put a gray overlay on an image in CSS
body: <p>I'd like to create a website that has a banner on every page with an image that has a gray overlay. In that way, white text on the image becomes more visible.
  The result should look exactly like this: <a href="http://skoopopweg.weebly.com/programma.html" rel="noreferrer">http://skoopopweg.weebly.com/programma.html</a>.</p>
  
  <p>I found ways to dull the image, but not to put an overlay on top of it. 
  Can anybody help?</p>
  
  <p>This is my code in CSS for this class of images thus far:</p>
  
  <pre><code>.img-with-overlay{width:100%; position:relative;}
  </code></pre>
  
  <p>And in html:</p>
  
  <pre><code>&lt;img class="img-with-overlay" src="img1.jpg" /&gt;
  </code></pre>