Can I apply CSS(3) filters ONLY on image sections?

Question

I have a full screen background image

.bg { 
    left: 0;
    min-height: 100%; 
    min-width: 100%; 
    position: fixed; 
    top: 0; 
    z-index: -1; 
}         


        

Answer 1

To get the blur effect, use filter: blur() (with vendor prefixes). The blur applies only to the element itself, not to anything underneath it, so you'll need to reference the image within the "blur box" as well as in the background, and use background-position to control the offset so that they line up properly.

.blur {
    background-image: url('http://placekitten.com/400/400');
    background-position: center -100px;
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
    filter: blur(10px);
}

JSFiddle Demo