Can I apply CSS filters (3) ONLY in areas of the image?

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 CSS3 filter, personally I would like to use the blur effect in the same position as my body

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

Here is an example:

screenshot of http://imageshack.us/a/img443/4976/j7qj.jpg

I want to write text over a blurry 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 provider prefixes). Blur applies only to the element itself, and not to anything below it, so you will need to refer to the image in the "blur field" as well as in the background, and use background-position to control the offset so that the line is correct.

 .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 blur the before selector and inherit the background-image instead of specifying the URL twice.

This makes the html structure more obvious.

JSFiddle Demo