CSS Background Image Blur without blurry edges

whatever.css

.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);
}