How to put in the header of the container?

Question

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

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

• First you have a full-screen image [already done by me ;-) Actually I use a clean css solution:

  background-size: cover; 

• Than blurring the background (1000px) of a centered container ( margin: 0 auto ), but not the contents in the container.
• The same container ( margin: 0 auto; width: 1000px; ) (of course, without blurring), where you can add html material (... text).

I hope someone can help me.

Answer 1

Reduce the size of the actual image, and in your HTML code, set large sizes for width and height.

For example, they have the width and height of a real image, possibly 50 pixels each. In the HTML code, set the width and height so that you can say something like: 150px.

Now this will make the image stretch out and therefore give it a blurry effect.

Well, that was a logical approach.

If you want to use CSS (CSS3), follow these steps:

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

just set the values ​​to your desired position.

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

hope this helps ...

EDIT 1:

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

put all your text in a div whose class is “text”, and leave the div with the “background” class empty.

The following styles also apply:

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