title: How to create a pattern overlay on top of an image
body: <p>I want my blog post thumbnails give a dotted overlay effect.
  The solutions I found where all CSS background-image controlled.
  But with such a solution it is harder to change the thumbnail.</p>
  
  <p>Basically what I want is something like this:</p>
  
  <pre><code>                &lt;div class="blog-image"&gt;
                      &lt;div class="pixel-overlay"&gt;&lt;/div&gt;
                      &lt;img class="img-responsive" src="assets/img/post1.jpg"&gt;              
                  &lt;/div&gt;
  </code></pre>
  
  <p>The thumbnail is then a  so you can easily control the source for other posts.</p>
  
  <p>I did try many many things, but I never got it working.
  The pixel-overlay div will always push the IMG out of the way.</p>
  
  <p>So how can I create an overlay without something like background-image: "assets/img/post1.jpg".........</p>