Mi (simplificado) html y css se ven así:

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
 
 *{margin:0;padding:0;}/*added as requested*/
.background-image {
  background-image: url("http://wallpapercave.com/wp/UoQbFHi.jpg");
  background-position: 0px 0px;
  left: 0;
  bottom:0; /*added as requested*/
  right:0;
  top:0; /*added as requested*/
  position: fixed;
  z-index: 1;
  animation: animatedBackground 10s linear infinite;
  background-size: cover;
  height: 160%;
  -webkit-filter: blur(5px);
  filter: blur(5px);
}
<div class="background-image"></div>

Aparentemente

webkit-filter: blur(5px);
  filter: blur(5px);

¿No funciona aquí? De todos modos, mi problema es que en el navegador que estoy usando, esto da un espacio extraño en la parte superior (por alguna razón)

EDITAR: Todavía no funciona, el espacio en la parte superior sigue ahí, resultado: ingrese la descripción de la imagen aquí

1
Safirah 29 dic. 2016 a las 15:56

3 respuestas

La mejor respuesta

Pruebe lo siguiente:

Establecer body as margin:0;padding:0

Y .background-image as top:0;left:0;right:0;bottom:0

Cambie webkit-filter en -webkit-filter

body{
  margin:0;
  padding:0;
 }
@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
.background-image {
  background-image: url("http://wallpapercave.com/wp/UoQbFHi.jpg");
  background-position: 0px 0px;
  left: 0;
  bottom:0;
  right:0;
  top:0;
  position: fixed;
  z-index: 1;
  animation: animatedBackground 10s linear infinite;
  background-size: cover;
  height: 160%;
  -webkit-filter: blur(5px);
  filter: blur(5px);
}
<body>
  <div class="background-image"></div>
</body>
2
Maths RkBala 29 dic. 2016 a las 13:13

En la mayoría de los navegadores, hay un margen predeterminado y relleno en user-agent-stylesheet que viene con el navegador.

No todos, pero algunos de los navegadores le permiten personalizar ese archivo CSS, pero siempre es fácil agregar explícitamente su elemento CSS para el cuerpo en su página web como

body {
  margin: 0px;
 padding: 0px;
       .....
     }
0
George Bailey 29 dic. 2016 a las 13:05

La parte del cuerpo invocará las divisiones internas, así que asegúrese de los márgenes del cuerpo, si establecemos el cuerpo margin:0px, eso tocará la parte superior del navegador.

Pruebe este código dentro de su código CSS,

body{
    padding: 0px;
    margin: 0px;
}
0
K.Suthagar 29 dic. 2016 a las 13:09