Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Background Image Blur without blurry edges
.blurry-bg {
background-image:url('../images/your-image.png');
background-position: 30% 30%;
background-repeat: no-repeat !important;
background-size: cover !important;
position: relative;
height: 600px;
filter: blur(50px) !important;
-webkit-filter: blur(50px) !important;
-moz-filter: blur(50px) !important;
-o-filter: blur(50px) !important;
-ms-filter: blur(50px) !important;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5') !important; /* IE lte 9 */
/* this does the trick */
transform: scale(1.2);
-ms-transform: scale(1.2); /* IE 9 */
-webkit-transform: scale(1.2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.