title: Overlay image with transparent colour and blur
body: <p>I have a header background image which is loaded into the html by wordpress how do I Overlay it with an RGBA / Transparent colour and blur its contents via CSS?</p>
  
  <p>Here is my code <a href="https://jsfiddle.net/g0qhxjr9/" rel="nofollow">https://jsfiddle.net/g0qhxjr9/</a></p>
  
  <p>In this case where you see the ing url is the wordpress featured image function</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#header_img_over {
   height: 100%;
   overflow: hidden;
   background: rgba(28,28,34,0.9); 
    filter: blur(20px);
   z-index: 2;
  }
  .header_bg {
   z-index: -10;
   position: absolute;
   overflow: hidden;
   height: 245px;
   min-height: 245px;
   top: 0;
   left: 0;
   width: 100%;
  }
  
  .header_bg img{
      width: 100%; 
      margin: 0 auto;
      min-height: 300px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header_img_over"&gt;&lt;div class="header_bg"&gt;&lt;img src="http://stylrs.com/v05/wp-content/uploads/2015/02/ML_Guildhall_TBL_0009-767x415.jpg"&gt;&lt;/div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>