CODEWITHSUNDEEP
css
Kashif Waheed
Kashif Waheed

Reputation: 597

blur background image only

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>

Upvotes: 4

Views: 17185

Answers (2)

Udara Herath
Udara Herath

Reputation: 885

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);
}

Upvotes: 0

Blender
Blender

Reputation: 298146

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.

Upvotes: 8

Related Questions