SVG gaussian blur 2

by Roberto Apasajja

HTML

<svg id="bgimg" viewBox="0 0 1875 900" width="1875px" height="900px" preserveAspectRatio="xMidYMid slice">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="15" />
    </filter>
  </defs>
  <image filter="url(#blur)"  xlink:href="https://images.unsplash.com/photo-1422157245273-e08b638b4b00?crop=entropy&fit=crop&fm=jpg&h=900&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1875" x="-15%" y="-15%" width="130%" height="130%"/>
</svg>

<div class="container">
  <h1>SVG blur & full size background test</h1>
</div>

CSS

* {
  box-sizing: border-box;
}

.container {
  height: 1000px;
  position: relative;
  padding: 100px;
}

body {
  position: relative;
}

#bgimg {
  position: fixed;
  width: 100%;
  height: 100%;
}