<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  
  <defs>
          <filter id="blurlayer" width="110%" height="100%">
            <feColorMatrix
    type="matrix"
    values=".7    0   0   0   0
            0    .7   0   0   0
            0    0   .7   0   0
            0    0   0   1   0 " />
            <feGaussianBlur stdDeviation="4" result="blur"/>
            
            
            <feImage id="feimage" xlink:href="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMTAyNCIgaGVpZ2h0PSIzMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogPGc+DQogIDx0aXRsZT5iYWNrZ3JvdW5kPC90aXRsZT4NCiAgPHJlY3QgZmlsbD0ibm9uZSIgaWQ9ImNhbnZhc19iYWNrZ3JvdW5kIiBoZWlnaHQ9IjMwMiIgd2lkdGg9IjEwMjYiIHk9Ii0xIiB4PSItMSIvPg0KIDwvZz4NCg0KIDxnPg0KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+DQogIDxyZWN0IGlkPSJzdmdfMSIgaGVpZ2h0PSIxMzMiIHdpZHRoPSIxMDI0IiB5PSI4NC41IiB4PSIwIiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSJudWxsIiBmaWxsPSIjMDAwMDAwIi8+DQogPC9nPg0KPC9zdmc+" x="0%" y="0"  height="300px" result="mask" preserveAspectRatio="none"/>
            
            <feComposite in2="mask" in="blur"  operator="in" result="comp" />
            
            <feMerge result="merge">
              <feMergeNode in="SourceGraphic" />
              <feMergeNode in="comp" />
            </feMerge> 
            
          </filter>
        </defs>
</svg>



<section class="banner">
  
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  
<image   filter="url(#blurlayer)" x="0" y="0" width="100%" height="300px"   xlink:href="https://www.sitepoint.com/themes/ecommerce/wp-content/uploads/sites/4/ecom-banner-2-1_1020x304_acf_cropped-1.jpg"/>
  
</svg>

  <div class="textcontainer">
  <h1 class="">The Cloud Collection 2017</h1>
    <p class="byline ">Beautiful. Elegant. Homewares.</p>
  </div>
</section>






 
html {
  height: 100%;
}

body {
  background: silver;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}

svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 100%;
}

.banner {
  height: 280px;
  margin: 2em 5% 0;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  overflow: hidden;
  position: relative;
  
}

.textcontainer {
  background: rgba(0, 0, 25, 0);
  font-size: 3em;
  padding: .5em 0;
  position: relative;
  z-index: 1000;
  line-height: .5em;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 1);
  top: 1.5em;
  width: 100%;
}

h1 {
  font-size: 1em;
  line-height: 1.5em;
  font-weight: 400;
  margin: 0;
  z-index: 100;
  text-shadow: 0 0 8px rgba(0, 0, 0, .3);
}

.byline {
  font-size: .3em;
  line-height: 1.5em;
  font-family: Merriweather;
  margin: .75em;
  z-index: 100;
  text-shadow: 0 0 8px rgba(0, 0, 0, .3);
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.