How to BLUR THE BACKGROUND of a container?

Question

Is there a way to blur the background of a container, but not the text inside?

You have your fullscreen image first [already done by me ;-) Actually I'm using a pure css solution:
```
background-size: cover;
```
Than blurring the background of the (1000px) centered container (margin: 0 auto), but not the content in the container.
The same container (margin: 0 auto; width: 1000px; ) (of course without the blur), where you can add html stuff (...text).

I'm hoping anyone can help me.

Anshu Dwibhashi · Answer 1 · 2013-08-13T12:45:35.237

3

Reduce the size of the actual image and in your HTML code put large dimensions for the width and height.

For example, have the width and height of the real image at perhaps 50px each. In the HTML code set the width and height to lets say, something like : 150px.

Now this will cause the image to get stretched and hence will give it a blurred effect.

Well, that was a logical approach.

If you want to use CSS (CSS3) do this:

filter: blur(5px) brightness(0.5);

just set the values to whatever you want..

Refrence: http://www.inserthtml.com/2012/06/css-filters/

hope that helps...

EDIT 1:

<div class="container">
    <div class="background"></div>
    <div class="text"></div>
</div>

put all your text in the div whose class is "text" and leave the div with class "background" empty..

also apply the following styles:

.background  {
    background: #CCC;
    filter: blur(5px) brightness(0.5);
    position: absolute;
    top: 0; left: 0;
    height: 100%; width:100%;
}
.text {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

edited Aug 13 '13 at 12:45

answered Aug 13 '13 at 11:56

Anshu Dwibhashi

4,617
3
28
59

did it help? if yes, appreciate by accepting the answer.. @MaximilianFuchs – Anshu Dwibhashi Aug 13 '13 at 12:27
add it in the `style` element of your head section. Add it to the container whose background you wish to blur.. like this: `container{filter:blur(5px) brightness(0.5);}` – Anshu Dwibhashi Aug 13 '13 at 12:33
okay, i'll try to find a solution.. – Anshu Dwibhashi Aug 13 '13 at 12:38
can you tell me what container you're working with? `div`,`span` or what? – Anshu Dwibhashi Aug 13 '13 at 12:39
tell me what container you're working with.. – Anshu Dwibhashi Aug 13 '13 at 12:40
if you use the div element, then check my updated solution **EDIT 1:*** – Anshu Dwibhashi Aug 13 '13 at 12:43
EDIT 1 sorry... check now @MaximilianFuchs – Anshu Dwibhashi Aug 13 '13 at 12:48

How to BLUR THE BACKGROUND of a container?

1 Answers1