0

quisiera me pudieran ayudar con este tema, estoy practicanto html y css muy simple, he puesto una imagen de fondo y le puse la propiedad background-attachment: fixed; y hasta donde leí es para que la imagen quede estática y no se mueva al hacer scroll. Desde la web todo funciona de maravilla, pero cuando se abre desde el móvil al hacer scroll la imagen se mueve un poco mostrando un fondo blanco pero luego se ajusta nuevamente. Alguien me podría indicar si esto es normal por el navegador o si es que me falta algo por hacer estas son las siguientes propiedades que tengo actualmente:

body {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/fondo-hamburguesa.jpg);
  background-size: cover;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  padding: 20px;
}

También dejo el proyecto publicado https://maguz727.github.io/menu-simple-restaurante/

De antemano muchas gracias por la ayuda que me puedan brindar.

2
  • Parece normal de Google Chrome al menos y no se si tenga solución. Si prestas atención, ese efecto sucede cuando llegas al punto en que la barra superior del navegador se oculta.
    – Mateo
    el 12 may. a las 3:38
  • Mientras tanto, una forma de disimularlo es con un background-color similar al de la imagen.
    – Mateo
    el 12 may. a las 4:24

1 respuesta 1

0

El problema esta es que algunos navegadores de móviles toman el

background-attachment: fixed; 

como

background-attachment: scroll; 

Para solucionarlo te sugiero colocarle un <div> adicional y aplicar estilos a ese elemento en lugar del fondo del body quedando de esta forma:

El CSS:

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  padding: 20px;
  overflow: hidden;
}

.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(./img/fondo-hamburguesa.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}

.content {
  position: relative;
  z-index: 1;
}

y el HTML:

<div class="background-image"></div>

<div class="content">
  
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.