CSS blur property only for background-image

Question

I am trying to apply the CSS blur property only to the background-image of with id="home" , but it also reflects in children class too. My HTML code is:

<section id="home">            
    <div class="home">
        <h1>ncats is an innovative</h1>
    </div>             
</section>

My CSS code is:

#home{
    display: block;
    background:url(../images/2.jpg) no-repeat;
    background-size: cover;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    width: 100%;
    height: 1080px;
}
.home{
    text-align:center;
}

I'm trying to get an output like in the below link: http://codepen.io/akademy/pen/FlkzB

But my output is like this, instead: http://codepen.io/anon/pen/yyEZOb

Answer 1

I got your Codepen to work with the following CSS:

#home:before{
    content: ""; /* CHANGE HERE! */
    position: absolute; /* CHANGE HERE! */
    z-index: -1; /* CHANGE HERE! */

    display: block;
    background:url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat;
    background-size: cover;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    width: 100%;
    height: 1080px;
}
.home{    
  text-align:center;
  z-index: 0; /* CHANGE HERE! */
}

Add the ':before' pseudo-element to specify that content be inserted before the element selected (#home).

Setting position to absolute and changing the z-indices are important here since we have to do some rearranging of the elements.

More info about :before pseudo-element

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

More info about z-index:

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

Perhaps you could use the opacity related property instead of the webkit-filter option:

#home{
    display: block;
    background:url('imageurl') no-repeat;
    background-size: cover;

    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;

    width: 100%;
    height: 1080px;
}

Answer 3

To get the output like the codepen you shared, you have to use the same technique and use a pseudo element like :before or :after .

Just change your CSS as follows:

#home:before{
  content:'';
  display: block;
  background:url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat;
  background-size: cover;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  width: 100%;
  height: 1080px;
  position: absolute;
  top: 0;
  left: 0;
  z-index:-1;
}

Answer 4

Actually you need to understand the block structure of HTML div. Whatever you apply to a parent element or parent division also get applied to the child. So if this is your code

<div class="parent"> Hi... <div class="child"> i am child </div> </div>

Now if you apply css filter:blur property to parent class it will too effect to the child class, as the parent class/div block contains the child class/div block inside it. So whatever you give to parent also get adopted by child.

But there is still a way this is how you can do : JSFiddle .

Explanation: There is one div with child as span and the other span as separate element. This div is given blur so it's child would also get affected, but the separate span is not because it's not the child of that div.

HTML

<div class="bg">
   <span class="inner"> 
    <h1>Hey i am normal text above the Background, and i am "Blur" ! </h1>
   </span> 
</div>  

   <span class="outer"> 
    <h1>Hey i am normal text above the Background, and i am not "Blur" ! </h1>
   </span> 

CSS

html, body {
    color:white;
    margin:0%;
    position:relative;
    background:black;
}
.bg {
    margin:0%;
    background-image:url(http://upload.wikimedia.org/wikipedia/commons/1/12/Sling-Sat_removing_space_debris.png);
    background-repeat:no-repeat;
    background-size:cover;
    height:100%;
    width:100%;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    z-index:-1;
}
.inner {
    z-index:0;
    display:block;
    width:100%;
    height:100%;
    position:fixed;
    top:0%;
    overflow:auto;
    text-align:center;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}
.outer {
    z-index:0;
    display:block;
    width:100%;
    height:100%;
    position:fixed;
    top:0%;
    overflow:auto;
    text-align:center;
    padding-top:50px;
}

Answer 5

For future readers (and present ones, who don't particularly care about cross-browser support): there is a CSS mechanism that does exactly this.

In the Filter Effects spec, filters are defined to also work as a functional notation , accepting an image + a list of filters. The syntax looks like this:

.El {
  background-image: filter(url(myImage.jpg), blur(5px));
}

...where the second argument to the filter function accepts a list of filters (the same as the filter property).

Sadly, only Safari has implemented it so far—it was released as -webkit-filter() in Safari 9, but had some serious bugs so they didn't even announce that it was supported. It's fixed in WebKit since, and due to be released in the next version of Safari (iOS 9.3/Desktop Safari 9.1).