portada de fondo en Firefox - css, css3, firefox, background-image

Estoy trabajando en un sitio web, en el que me gustaría que una imagen de fondo llene toda la pantalla, incluso si parte de ella está cortada. background-size: cover La propiedad CSS funciona muy bien en Chrome y Safari. Sin embargo, cuando intento abrir la página web en Firefox, la imagen completa se ve demasiado alta, con la parte inferior como background-color que seleccioné ¿Por qué sucede esto y qué puedo hacer para evitarlo?

Además, tengo el background-position: right center propiedad, y trató de agregar el -moz-background-size y -moz-background-position Propiedades, sin suerte.

Aquí está el CSS relevante:

-moz-background-size: cover;
background-size: cover;
-moz-background-position: right center;
background-position: right center;

EDITAR: Aquí está el sitio web: crowdsparked.com

Respuestas

Tuve un problema similar - encontré que aunqueel tamaño del fondo cubre la pantalla, la altura del cuerpo no era la pantalla completa y, cuando utilizaba el siguiente 50% hacia abajo desde la parte superior, se colocaba mucho más alto de lo que quería. Cuando agregué ancho: 100% y altura: 100% que lo arregló (también margen: 0px para evitar la barra de desplazamiento).

Por favor, trate de usar este estilo:

background-attachment: fixed;

Prueba esto en tu css:

background-size: contain;
//or this:
background-size: cover;

No es necesario que prefieras ninguno de estos. Aquí está la especificación de moz que se explica mejor que nunca:

Contiene

El valor contenido especifica que, independientemente deEl tamaño de la caja contenedora, la imagen de fondo debe escalarse de modo que cada lado sea lo más grande posible, sin exceder la longitud del lado correspondiente del contenedor.

Cubrir

El valor de cobertura especifica que el fondola imagen debe dimensionarse de modo que sea lo más pequeña posible, al tiempo que se garantiza que ambas dimensiones sean mayores o iguales al tamaño correspondiente del contenedor.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size