How do I blur the background only and not the divs under it?

Question

I've have a problem when using the filter: blur() function in CSS. First, it doesn't appear, and second it will blur the entire DIV.

Edit: Edited now with images and other css that I didn't include earlier.

This is my HTML/CSS:

.user-archive {}

        .user {
          float: left;
          width: 100%;
          max-width: 326px;
          min-height: 120px;
          padding-right: 10px;
          background-repeat: no-repeat;
          background-position: center;
          background-size: 100%;
          filter: blur(5px);
        }

        .user-avatar {
          float: left;
          width: 90px;
          min-height: 90px;
          padding-right: 10px;
          border-radius: 50%;
          margin: 10px 10px 0 15px;
        }

    .avatar,.featuredpage img,.featuredpost img,.post-image {padding: 4px; background-color: #f7f7f7; border: 1px solid #e6e6e6;}

    img.author {
          float: left;
          margin: 5px 20px 15px 0px;
          border-radius: 50%;
      }

    .avatar, .featuredpage img, .featuredpost img, .post-image {

        background-color: none;
        
        border-radius: 50%;
    }

<div class="user-archive">
            <a href="#">
                <div class="user" style="background-image:url(http://www.american.edu/uploads/profiles/large/chris_palmer_profile_11.jpg);" >
                <div class="user-avatar">
                    <img alt="#" class="avatar avatar-152 photo avatar-default" height="90" src="http://www.american.edu/uploads/profiles/large/chris_palmer_profile_11.jpg">
                </div>
                </div>
            </a>
        </div>

with no images in the source the snippet is useless to us, put in some absolute paths to the images you are using for testing. — Wobbles, Oct 17 '15 at 13:54
The blur filter applies to the entire element (including everything inside). You need a separate element that contains only the image you want to work as a background, and apply the blur filter to that. — Ryan, Oct 17 '15 at 14:03

score 3 · Accepted Answer · answered Oct 17 '15 at 14:08

Place the avatar in a separate layer to avoid it blurring, then use webkit to make the blur more browser compatible.

.user-archive {}

        .user {
          float: left;
          width: 100%;
          max-width: 326px;
          min-height: 120px;
          padding-right: 10px;
          background-repeat: no-repeat;
          background-position: center;
          background-size: 100%;
          -webkit-filter: blur(5px);
          -moz-filter: blur(5px);
          -o-filter: blur(5px);
          -ms-filter: blur(5px);
          filter: blur(5px);
        }

        .user-avatar {
          position:absolute;
          width: 90px;
          min-height: 90px;
          padding-right: 10px;
          border-radius: 50%;
          margin: 10px 10px 0 15px;
          top:0px;
          left:0px;
        }

    .avatar,.featuredpage img,.featuredpost img,.post-image {padding: 4px; background-color: #f7f7f7; border: 1px solid #e6e6e6;}

    img.author {
          float: left;
          margin: 5px 20px 15px 0px;
          border-radius: 50%;
      }

    .avatar, .featuredpage img, .featuredpost img, .post-image {

        background-color: none;
        
        border-radius: 50%;
    }

<div class="user-archive">
            <a href="#">
                <div class="user" style="background-image:url(http://www.american.edu/uploads/profiles/large/chris_palmer_profile_11.jpg);" >
                
                </div>
<div class="user-avatar">
                    <img alt="#" class="avatar avatar-152 photo avatar-default" height="90" src="http://www.american.edu/uploads/profiles/large/chris_palmer_profile_11.jpg">
                </div>
            </a>
        </div>

How do I blur the background only and not the divs under it?

1 Answers1