Cómo crear: Imagen de página completa
- Página anterior Texto sobre imagen transparente
- Página siguiente Formulario en imagen
Aprenda cómo crear una imagen de fondo de página completa utilizando CSS.
Imagen de página completa
Aprenda cómo crear una imagen de fondo que cubra toda la ventana del navegador. El siguiente ejemplo muestra una imagen de fondo responsiva completa (y media) de pantalla:
Cómo crear una imagen completa de altura
Utilice un elemento contenedor y agregue una imagen de fondo de 100% de altura a ese contenedor.
Consejo:Utilizar 50% puede 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 establecer height: 100% se aplica simultáneamente a <html> y <body>:
Imagen de fondo de página completa:
body, html {
height: 100%;
{}
.bg {
/* Imagen utilizada */
background-image: url("dancer.jpg");
/* Completa altura */
height: 100%;
/* Muy bien centrado y escalado la imagen */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
{}
imagen de fondo de media página:
.bg {
height: 50%;
{}
- Página anterior Texto sobre imagen transparente
- Página siguiente Formulario en imagen
