0

Tengo una imagen de fondo en un elemento que esta a 100% height y width.

CSS

#splash{
    background-image: url("../img/background_splash.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height:100%;
}

HTML

 <body>
     <section id="splash">
         //contenido
     </section>
 </body>

Probe usando vh y vmax pero no logre nada.

Funciona todo bien en todas las resoluciones, menos cuando me voy a landscape desde el celular. Es decir, el alto no llega a ocupar toda la pantalla si no hasta donde se renderizó la primera vez en Portrait. Como el contenido sobrepasa la pantalla, tengo que hacer scroll y cuando hago scroll se ve el blanco debajo.

¿Alguna idea?

Desde ya agradezco el interés.

5
  • Adjunta código para poder entender el 2 may. 2017 a las 18:01
  • hola, ahí esta bien?
    – codetojoy
    el 2 may. 2017 a las 18:11
  • bien, tienes el html adicionalmente? el 2 may. 2017 a las 18:14
  • ahi agregue el codigo
    – codetojoy
    el 2 may. 2017 a las 18:36
  • honestamente no entiendo la pregunta el 2 may. 2017 a las 18:42

1 respuesta 1

0

bueno puedo resolverlo y dejo acá el código por si a alguien le sirve, el truco es usar

vmax
en el elemento hijo, una imagen mas chica para mobile y ademas
100% height
en los elementos padre

@media (max-width: 768px){
#splash, .background-body {
background-image: url(../img/background_splash_mobile.jpg);
height: 100vmax !important;
}}

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.