Hacer desenfoque en container

[Kintan15]

Muy buenas shurs,
he estado estos días intentado hacer unas cosillas con csss y html pero no me han salido como yo esperaba, y pues he probado de mil maneras pero con ninguna funciona.

En principio os paso los códigos html y css:

HTML

Código HTML:

 <div class="container">
	  		<span class="pull-left logo-container">
                <img class="logo" src="{$my_base_url}/templates/bootstrap/img/logo-pic.png" width="100%" height="100%">
            </span>
	    </div> 

CSS

Código:

.logo-main {
  margin:32px 0 20px 0;
  padding: 10px;
  background-image: url(../img/logo-pic);
}
.logo-container {
  margin:32px 0 20px 0;
  padding: 10px;
  -webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow:    0px 0px 10px 5px rgba(0, 0, 0, 0.2);
  box-shadow:         0px 0px 10px 5px rgba(0, 0, 0, 0.2);
}
.logo-blur {
  margin:32px 0 20px 0;
  padding: 10px;
  -webkit-filter: blur(5px);
}
.logo {
  display:block;
  background:no-repeat url(../img/logo3.png);
  background-size:100% auto;
}

Lo que quiero hacer es desenfocar el rectángulo generado con "logo-container" pero sin desenfocar la imágen, es decir el logo. He probado de mil formas y siempre pasa igual, o se descuadra todo o se desenfoca el logo también.

Un saludo!

[NueveReinas]

¿Por qué tienes 3 logos?

Hay uno en el HTML, otro de fondo en la clase "logo-main" y otro de fondo en la clase "logo".

[Carlangueitor]

¿Y por que no haces eso en un editor gráfico?

[Kintan15]

Iniciado por NueveReinas

¿Por qué tienes 3 logos?

Hay uno en el HTML, otro de fondo en la clase "logo-main" y otro de fondo en la clase "logo".

A que te refieres con eso? Es que en realidad el css lo creo otro desarrollador pero que ahora no está. He utilizado algo así:

Código HTML:

 <div class="container">
	  	  <span class="pull-left logo-main">
	  		<span class="pull-left logo-container">
	  			<spain class="pull-left logo-blur">
                <img class="logo" src="{$my_base_url}/templates/bootstrap/img/logo-pic.png" width="100%" height="100%">
                </span>
            </span>
          </span>
	    </div> 

Y no funciona tampoco.

[Kintan15]

EDIT: Respuesta a lo del editor gráfico.

Porque el desenfoque se aplica a un banner en movimiento.

.banner-bgscroll {
background-color: #fff;
background-image: url(../img/banner2.jpg);
background-repeat: repeat-x;
background-position: left bottom;
color: #fff;
-webkit-box-shadow: inset 0px -5px 5px 0px rgba(0, 248, 22, 1);
-moz-box-shadow: inset 0px -5px 5px 0px rgba(0, 248, 22, 1);
box-shadow: inset 0px -5px 5px 0px rgba(0, 248, 22, 1);
}