CSS top container blur but no inside container

Question

I have 2 div containers. I want the top container to be blur and the container inside to be have opacity. For some reason, both containers are blurred. Why?

jsfiddle

This is my HTML and CSS:

<body>

<div class="page blurme">
    <div id="container">
        <p>blur background image with and opaque container</p>
    </div>
</div>

</body>

CSS

body, p {margin: 0; padding: 0;}

.page {
    overflow: auto;
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    background: #222 url('http://www.hdwallpapersn.com/wp-content/uploads/2015/04/nature-background-images2.jpg') no-repeat left top;
    background-size: cover;
}

.blurme {
    -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);
}

#container {width: 500px; min-height: 3500px; margin: 0 auto; border: 5px solid red; background-color: rgba(0,0,0, 0.7);}
#container > p {color: white;}

As your #container div is inside your .blurme div, it will be blurred too. You should create two divs in the same level (not parent-child). — Mindastic, Jul 08 '15 at 18:10
is this what you are trying to get https://jsfiddle.net/harshdand/b8y1s8cd/1/embedded/result/ — Harsh, Jul 08 '15 at 18:51
the problem with all of the solutions is that if the inside container is big, like 2500px, than the background image doesnt fill the screen... — Marco, Jul 08 '15 at 20:33

score 1 · Answer 1 · answered Jul 08 '15 at 19:01

JSFIDDLE https://jsfiddle.net/harshdand/b8y1s8cd/2/

HTML

<div class="page blurme"></div>
<div id="container">
    <p>blur background image with and opaque container</p>
</div>

JS

.page {
    position: relative;
    padding: 50px;
    height: 500px;
    background: #222 url('http://www.hdwallpapersn.com/wp-content/uploads/2015/04/nature-background-images2.jpg') no-repeat left top;
    background-size: cover;
}
.blurme {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

#container {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 500px;
    min-height: 500px;
    margin: 0 auto;
    border: 5px solid red;
    background-color: rgba(0, 0, 0, 0.7);
}

i appreciate the help, but the problem with this solution is that if the inside container is big, like 2500px, than the background image doesnt fill the screen — Marco, Jul 08 '15 at 20:40

score 1 · Answer 2 · edited May 23 '17 at 12:29

I wanted to go a different route and make the box so that it is always centered.

I made a JSFiddle for you to see the difference.

I did a simple google search and got a basis off of stackoverflow here.

Here is the CSS I used:

html, body {
    margin: 0;
    padding: 0;
}
.background-image {
    background-image: url('http://www.hdwallpapersn.com/wp-content/uploads/2015/04/nature-background-images2.jpg');
    background-size: cover;
    position: fixed;
    display: block;
    height: 100%;
    left: 0;
    right: 0;
    z-index: 1;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}
.content {
    border: 5px solid red;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    margin: 20px;
    z-index: 2;
    padding: 0 10px;
    color: white;
}

score 1 · Accepted Answer · answered Jul 09 '15 at 05:45

Both containers become blurred because the #container element is in the .blurme element. If you want only your background to be blurred, then you can use to create two child elements. One with the blurred image. The other one is the opaque container having 2 children, the 1st child contains another image that can't be scroll and the other contains your text block that can be scroll. Set their z-index, adjust their left and their other styles if necessary.

body, p {margin: 0; padding: 0;}
  
.page {
    overflow: auto;
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}

.blurme {
    -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);
    background: #222 url('http://www.hdwallpapersn.com/wp-content/uploads/2015/04/nature-background-images2.jpg') no-repeat left top;
    background-size: cover;
    position: fixed; top: 0; bottom: 0; left: -200px; right: 0;
    z-index: -2;
}

.bg {
    background: #222 url('http://www.hdwallpapersn.com/wp-content/uploads/2015/04/nature-background-images2.jpg') no-repeat left top;
    background-size: cover;
    position: fixed; top: 0; bottom: 0; left: -15px; right: 0;
    z-index: -1;
    width: 500px;
    margin: 0 auto;
}

#container {width: 500px; min-height: 3500px; margin: 0 auto; border: 5px solid red; background-color: rgba(0,0,0, 0.7);}
#container > p {color: white;}

<div class="page">
    <div class="blurme"></div>
 <div id="container">
        <div class="bg"></div>
  <p>blur background image with and opaque container</p>
 </div>
</div>

I have given you an example. I thought what you need is more complex. But anyway, if you only want the text to have the opacity then you can use this, create two child elements, one that blur(5px) and the other one that's not.

body, p {margin: 0; padding: 0;}
  
.page {
    overflow: auto;
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}

.blurme {
    -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);
    background: #222 url('http://www.hdwallpapersn.com/wp-content/uploads/2015/04/nature-background-images2.jpg') no-repeat left top;
    background-size: cover;
    position: fixed; top: 0; bottom: 0; left: 0; right: 0;
    z-index: -1;
}

#container {width: 500px; min-height: 3500px; margin: 0 auto; border: 5px solid red; background-color: rgba(0,0,0, 0.7);}
#container > p {color: white;}

<div class="page">
    <div class="blurme"></div>
 <div id="container">
  <p>blur background image with and opaque container</p>
 </div>
</div>

CSS top container blur but no inside container

3 Answers3