https://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image
Abolishing the need for an extra element, along with making the content fit within the document flow rather than being fixed/absolute like other solutions.
Achieved using
.content {
overflow: auto;
position: relative;
}Overflow auto is needed, else the background will be offset by a few pixels at the top.
After this you simply need
.content:before {
content: "";
position: fixed;
left: 0;
right: 0;
z-index: -1;
display: block;
background-image: url('img-here');
background-size:cover;
width: 100%;
height: 100%;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}EDIT If you are interested in removing the white borders at the edges, use a width and height of 110% and a left and top of -5%. This will enlarge your backgrounds a tad - but there should be no solid colour bleeding in from the edges.
Updated Pen here: https://codepen.io/anon/pen/QgyewB - Thanks Chad Fawcett for the suggestion.
