CSS Blur

by zerippe

HTML

<div id="container">
<div id="background">
    sdfsdf
    
</div>
</div>

CSS

#container{
    position: relative;
	height:300px;
	background-image:url(http://placeimg.com/800/600/any);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-size:cover;
}
#background{
    position: relative;
	background:inherit;
	overflow:hidden;
	box-shadow:0 0 3px rgba(0, 0, 0, .2);
	color:#eeeeee;
	z-index:0;
    padding: 10px 20px;
}
#background::before, #background::after{
	content:"";
	position:absolute;
	z-index:-1;
}
#background::before{
	background:inherit;
	width:300%; height:300%;
	left:-75%; top:-75%;
	-webkit-filter:blur(7px) grayscale(10%);
}
#background::after{
	background-color:rgba(0, 50, 100, .1);
	top:0; left:0;
	width:100%;
	height:100%;
}