blur background image only

Question

as you can see the are two images on top portion of the page that is given in the link that are blur one is background image and one is the image above it both are blur what i want is to blur the background image only not the top one i dont know how to do it please help here is the link http://www.node.au.com/projects/at38/

here is my css

 #work-gallery 
  {
   background-repeat:no-repeat;
   background-size:cover;
   -webkit-filter: blur(5px);
  }

this is the html of the top image which i don't want to blur

 <div id="slideshow" style="margin-top: 17.5px;"> 
   <ul id="fdgSlides" style="width: 1275px; height: 425px; left: 0px;">
     <li class="fdgSlide" style="width: 1275px;">
       <img src="node.au.com/wp-content/uploads/thumb_at38_01.jpg"; alt="" style="width: auto; height: 100%; margin-top: -212.5px;"> 
     </li>  
    </ul>
 </div>

score 8 · Answer 1 · answered Feb 06 '13 at 00:05

8

Make a separate background element:

HTML:

<div id="gallery-background"></div>

CSS:

#gallery-background {
    position: absolute;

    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    background-image: url(http://www.node.au.com/wp-content/uploads/thumb_at38_01-450x300.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    -webkit-filter: blur(5px);
}

The -webkit-filter will affect the children of the element that you're applying it to, so you have to move the background out.

answered Feb 06 '13 at 00:05

Blender

289,723
53
439
496

but i have only css file i dont have html file kindly send me the solution for avaialble html structure – Kashif Waheed Feb 06 '13 at 00:07
@KashifWaheed: You'll have to make some hack with an `:after` pseudo-element. – Blender Feb 06 '13 at 00:09
here is the html of the top image
– Kashif Waheed Feb 06 '13 at 00:10
i am not getting you Mr Blender – Kashif Waheed Feb 06 '13 at 00:17
is there any one else?? my problem still exist – Kashif Waheed Feb 06 '13 at 00:25

score 0 · Answer 2 · answered Nov 24 '16 at 11:44

I have found a solution in fiddle

<div> 
</div>
<p><span>WOW</span></p>

div {
    height:500px;
    width:100%;
    text-align:center;
    background:url('http://i0.kym-cdn.com/photos/images/original/000/051/726/17-i-lol.jpg?1318992465') no-repeat center;
    background-size:cover;
    -webkit-filter: blur(13px);
    -moz-filter: blur(13px);
    -o-filter: blur(13px);
    -ms-filter: blur(13px);
    filter: blur(13px);
    position: absolute;
    left:0;
    top: 0;
}
p {
    position: absolute;
    left:0;
    top: 0;
}
span {
    color:blue;
    font-size:50px;
    font-weight:bold;
    position:relative;
    position:absolute;
    z-index:9999;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(13px);
    filter: blur(0px);
}

blur background image only

2 Answers2

Linked