Cómo - Imagen de página completa
Aprende a crear una imagen de fondo de página completa con CSS.
Imagen de página completa
Aprenda a crear una imagen de fondo que cubra toda la ventana del navegador. El siguiente ejemplo muestra una imagen de fondo receptiva de pantalla completa (y media pantalla):
Demostración: imagen de fondo de página completa
Demostración: imagen de fondo de media página
Cómo crear una imagen de altura completa
Use un elemento contenedor y agregue una imagen de fondo al contenedor con height: 100%
.
Sugerencia: use 50% para crear una imagen de fondo de media página. Luego use las siguientes propiedades de fondo para centrar y escalar la imagen perfectamente:
Nota: Para asegurarse de que la imagen cubra toda la pantalla, también debe aplicar height: 100%
tanto a <html> como a <body>:
Ejemplo
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Imagen de fondo de media página:
Ejemplo
.bg {
height: 50%;
}