1

Estoy haciendo un sitio que tiene una seccion principal con una imagen de fondo que ocupa toda la pantalla.

 <div class="full-screen force-full-screen" style="text-align:center;position: fixed; width: 100%; background: #000000 url('demos/resume/images/hero-image/1.jpg'); background-repeat:no-repeat; background-position: center center; background-size: cover; background-attachment: fixed;">

Me ocurre el siguiente problema:

En el navegador la imagen se ve perfecto, y si apreto F12 para visualizar el sitio en dispositivos mas pequeños, se ve todo perfecto. Ahora, si accedo desde el telefono movil al servidor local (xampp), el fondo de pantalla del sitio es una pequeña porcion de la imagen, que efectivamente cubre el 100% del viewport pero no con la imagen como yo deseo, sino con una porcion pixelada de la misma. (Tengo un iPhone SE, y si en chrome emulo ese dispositivo, se ve bien, pero en el movil se ve mal).

Alguna idea de porqué puede ser? (Espero hacerme entender, si no es asi diganme y subo capturas de ambos dispositivos)

EDIT: Agrego 3 imagenes

1 - Lo que veo en el navegador

2 - Navegador emulando un movil

3 - Captura del movil

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

5
  • Unas capturas de pantalla del emulador, del navegador y de como se ve en el dispositivo real ayudarían mucho a clarificar el problema expuesto
    – user128299
    el 8 abr. 2020 a las 2:07
  • ya agregue las imagenes de lo que sucede
    – Agustin G.
    el 8 abr. 2020 a las 2:17
  • SOLUCIONADO: Elimine todas esas propiedades y las fui agregando una a una, probando el comportamiento paso a paso. Finalmente logre lo que queria dejando unicamente las paropiedades indicadas a continuacion: <div class="full-screen force-full-screen" style="text-align:center; background-image: url('demos/resume/images/hero-image/1.jpg'); background-position: center center; background-repeat:no-repeat; background-size: cover; ">
    – Agustin G.
    el 8 abr. 2020 a las 3:04
  • Publica tu solución
    – user128299
    el 8 abr. 2020 a las 3:15
  • Lo haria si supiera donde estaba el problema, pero desconozco cual y porque era la propiedad que me daba el problema. Prefiero dejarla en un comentario si no voy a explicar la respuesta
    – Agustin G.
    el 8 abr. 2020 a las 3:20

1 respuesta 1

1

Y si pruebas:

width: 100%;
height: 100vh;
position: fixed;
background: #000000 url(https://localhost/obj/public/portfolio-shot.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;

height: 100vh; ocupara el 100% de altura del viewport, la imagen la imagen ocupará toda la pantalla también pero hecho de manera distinta, espero que te funcione en el teléfono.

Tu Respuesta

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

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