Can I apply CSS 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; 
}

and want to apply a CSS filter, personally I would like to use a blur effect, at the same position as my body

.container {
    margin: 0 auto; 
    width: 1000px;
}

Here's an example:

I want to write text over the blurred container.

Answer 1

http://jsfiddle.net/QvSng/6/

CSS

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(http://lorempixel.com/420/255) no-repeat center center fixed;
    background-size: cover;
}
body:before {
    left: 0;
    right: 0;
    margin-left:auto;
    margin-right:auto;
    content: "";
    position: absolute;
    height: 100%;
    width: 500px;
    background: url(http://lorempixel.com/420/255)  no-repeat center center fixed;
    background-size: cover;
    z-index: -1;
    filter: blur(5px);
    -webkit-filter: blur(5px);
}

div {
    height: 100%;
    width: 450px;
    margin: 0 auto;
}

Answer 2

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

Answer 3

You can actually apply blur for the before selector and inherit background-image instead of specifying url twice.

That makes the html structure more evident

JSFiddle Demo