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>

Answer 1

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.