Pregunta ¿Cómo mostrar la imagen de fondo de altura completa?


Tengo una imagen de fondo tipo foto (no paisaje) con 979 píxeles de ancho por 1200 píxeles de alto. Me gustaría configurarlo para que flote a la izquierda y muestre una altura de imagen completa al 100%, sin la necesidad de desplazarse hacia arriba o hacia abajo (independientemente de la longitud del contenido).

Este es mi código CSS, pero no funciona:

img, media {
    max-width: 100%;
}

body {
    background-color: white;
    background-image: url('../images/bg-image.jpg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

36
2017-09-19 17:59


origen


Respuestas:


Puede hacerlo con el código que tiene, solo necesita asegurarse de que html y body están configurados al 100% de altura.

Manifestación: http://jsfiddle.net/kevinPHPkevin/a7eGN/

html, body {
    height:100%;
} 

body {
    background-color: white;
    background-image: url('http://www.canvaz.com/portrait/charcoal-1.jpg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

59
2017-09-19 18:13



CSS puede hacer eso con fondo de pantalla: cubierta;

Pero para ser más detallado y admitir más navegadores ...

Use una relación de aspecto como esta:

 aspectRatio      = $bg.width() / $bg.height();

VIOLÍN


5
2017-09-19 18:10