Effect blur on a banner with CSS

There is a way to do this without having to add or alter the html and it is taking advantage of pseudoselectives :before o :after , although they already gave you a solution (which is perfectly valid), I suggest you check this other , which can also be interesting to know. :)

Look:

.fondo_banner {
  margin: 0 auto 1em;
  position: relative;
  height: 240px;
  overflow: hidden;
}

.fondo_banner::before{ /*Esta es la imagen de fondo*/
  content: '';
  background-image: url(https://www.walldevil.com/wallpapers/a49/desktop-wallpaper-nepal-background-wallpapers.jpg);
  background-repeat: no-repeat;
  background-position: 100%;
  background-size: cover;
  display: block;
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.fondo_banner:hover::before{ 
  filter: blur(10px);
  transition: all linear .5s;
}

.fondo_banner::after { /*esta es la capa overlay*/
  content: '';
  background-color: rgba(69, 90, 100, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: block;
}

#pUsuario_avatar {
  background-image: url(http://pia.az/photos/gffbff.jpg);
  position: relative;
  width: 85px;
  height: 85px;
  background-size: cover;
  background-position: top center;
  border-radius: 50%;
  margin: 15px auto;
  cursor: pointer;
  z-index: 3;
}

<div class="fondo_banner">
  <div id="pUsuario_avatar">

  </div>
</div>

The first thing you must do to achieve this, is to create the pseudo-element selector, which what you do in a few words is to generate another html element, without modifying the html (imagine the possibilities hehe), this is how we create it:

.fondo_banner::before{}

Of course, nothing will be seen unless you put what kind of content is going to have inside, in this case it will not have anything, like this:

.fondo_banner::before{
   content: '';
}

Now even though it's going to be empty, it's going to have a background so we pass all the background image data to this selector.

.fondo_banner::before{ 
  content: '';
  background-image: url(https://www.walldevil.com/wallpapers/a49/desktop-wallpaper-nepal-background-wallpapers.jpg);
  background-repeat: no-repeat;
  background-position: 100%;
}

Now you have to tell it to occupy all the parent element (which must necessarily have a position: relative , which in your case it already has), as in the beginning this element is of type inline will not take the width and the high, unassigned first that will behave as a block or ( block in line or if you want flex , table , etc), once we do this we can add an absolute position and a z-index, for the control of the layers.

.fondo_banner::before{ 
  content: '';
  background-image: url(https://www.walldevil.com/wallpapers/a49/desktop-wallpaper-nepal-background-wallpapers.jpg);
  background-repeat: no-repeat;
  background-position: 100%;
  background-size: cover;
  display: block;
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

And so that when you pass the hover, this is added the blur you must compose the selector like this:

.fondo_banner:hover::before{ 
  filter: blur(10px);
}

In fact, this technique is so useful, that you could even do without the other element in the html that made overlay layer , in fact in the example I did it.

The only downside (if we can call this technique an inconvenience) is that it only has a creation maximum (at the moment) of up to 2 elements ( after y before ).

The problem is that the blur effect is applied to the entire element (including descendants). Since the avatar is inside the div to which you put the blur effect, the avatar will also be blurry.

One solution would be to move the avatar out of the element you're going to blur to (create a container for everything). In addition, the blur effect should be applied to the div that contains the background image so that it looks blurry (which you will also put an absolute position so that it occupies the full size of the parent).

Something like this:

#banner {
  position: relative;
  height: 240px;
  /* truco para que el avatar respete los 15px de margen superior */
  border-top:1px solid transparent; 
}

.fondo_banner {
  background-image: url(https://www.walldevil.com/wallpapers/a49/desktop-wallpaper-nepal-background-wallpapers.jpg);
  background-repeat: no-repeat;
  background-position: 100%;
  background-size: cover;
  margin: 0 auto 1em;
  position: absolute;
  height: 100%;
  width: 100%;
  filter: blur(5px);
}

.overlay_fondo_banner {
  background-color: rgba(69, 90, 100, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#pUsuario_avatar {
  background-image: url(http://pia.az/photos/gffbff.jpg);
  position: relative;
  width: 85px;
  height: 85px;
  background-size: cover;
  background-position: top center;
  border-radius: 50%;
  margin: 15px auto;
  cursor: pointer;
  filter: blur(0);
}

<div id="banner">
  <div class="fondo_banner">
    <div class="overlay_fondo_banner">
    </div>
  </div>
  <div id="pUsuario_avatar"></div>
</div>

I think what you're looking for is the following:

For this type of effects it is necessary to use positioning with their respective z-index.

#fondo_banner{
  position:relative;
  background-image: url(https://www.walldevil.com/wallpapers/a49/desktop-wallpaper-nepal-background-wallpapers.jpg);
  background-repeat: no-repeat;
  background-position: 100%;
  background-size: cover;
  height: 240px;
  width: 100%;
  z-index: -5;
}
#overlay_fondo_banner{
  position:absolute;
  background-color: rgba(69, 90, 100, 0.6);
  top:0;
  left:0;
  right:0;
  bottom:0;
  width: 100%;
  height: 100%;
  filter: blur(15px);
  z-index:-1;
}
#pUsuario_avatar{
  background-image: url(http://pia.az/photos/gffbff.jpg);
  position: relative;
  width: 85px;
  height: 85px;
  background-size: cover;
  background-position: top center;
  border-radius: 50%;
  margin: 15px auto;
  cursor: pointer;
}

<div id="fondo_banner">
  <div id="overlay_fondo_banner"></div>
  <div id="pUsuario_avatar">
    
  </div>
</div>