La capacidad de estirar la imagen de fondo al ancho completo de la ventana del navegador usando CSS solo apareció con el lanzamiento de su última especificación: CSS3. Desafortunadamente, hasta ahora un gran número de navegadores web utilizan navegadores antiguos que no comprenden la especificación CSS3. Por lo tanto, debe tomar una decisión: usar una solución menos conveniente, pero para varios navegadores, o una alta tecnología, pero para una audiencia limitada. Consideremos ambas opciones.
Necesario
Conocimientos básicos de HTML y CSS
Instrucciones
Paso 1
La primera opción se basa en especificaciones anteriores del lenguaje CSS. Necesita crear una estructura de código HTML que tenga dos capas superpuestas, una encima de la otra. Las capas (div) se pueden estirar hasta el ancho de la pantalla en la antigua especificación del lenguaje de descripción de estilo en cascada. En la parte inferior de las capas debes colocar la imagen de fondo, y en la superior colocará todo el contenido de la página. Tal estructura en el cuerpo del documento podría verse así:
Este será el contenido de la página.
Y la descripción de estilos para esta estructura debe colocarse en la parte del título. Por ejemplo, esto:
html, cuerpo {
margen: 0px;
altura: 100%;
}
#antecedentes {
posición: absoluta;
ancho: 100%;
altura: 100%;
}
#cuerpo {
posición: absoluta;
ancho: 100%;
altura: 100%;
índice z: 2;
}
Aquí, las capas con fondo de ID (esta es su imagen de fondo) y cuerpo (esta es la capa para el contenido de la página) están configuradas en posicionamiento absoluto y 100% de ancho y alto. Además, a la capa de contenido se le asigna un número de serie z-index = 2. Determina la "profundidad" de las capas: cuanto más grande es, más lejos de la "parte inferior" se encuentra esta capa. En nuestro caso, estará por encima de la capa de fondo, que usa el índice Z predeterminado.
Paso 2
El código completo podría verse así:
html, cuerpo {
margen: 0px;
altura: 100%;
}
#antecedentes {
posición: absoluta;
ancho: 100%;
altura: 100%;
}
#cuerpo {
posición: absoluta;
ancho: 100%;
altura: 100%;
índice z: 2;
}
Este será el contenido de la página.
No olvide reemplazar el nombre del archivo de la imagen de fondo fon.png.
Paso 3
La segunda opción utilizará la propiedad background-size introducida en CSS3. Al mismo tiempo, agregue propiedades similares a las definiciones de estilo que fueron utilizadas anteriormente por los navegadores Mozilla Firefox, Google Chrome y Opera. El bloque de descripción de estilo en esta versión puede verse así:
html {
background: url (fon.png) centro sin repetición centro fijo;
-webkit-background-size: portada;
-moz-background-size: portada;
-o-background-size: cover;
tamaño de fondo: cubierta;
}
Y aquí no olvides reemplazar el nombre del archivo de la imagen de fondo fon.png. Y en el cuerpo del documento en sí, no se requieren construcciones especiales en esta versión.
