Continuando con la página Las Edades de la Tierra, en este post voy a explicar cómo incluir las imágenes de fondo y que estas queden fijas y se adapten a cualquier resolución y tamaño de la ventana.
En primer lugar el código HTML5:
El HTML es sencillo (y el CSS también lo será). Inmediatamente después de la etiqueta 'body' insertamos la imagen de fondo con un 'id'. Después, dentro de la etiqueta 'header' incluimos la imagen (también con un 'id') que nos servirá de título de la página. Esta última imagen es bueno incluirla dentro de las etiquetas 'h1' y 'a' con un 'title' ya que influirá en el SEO (posicionamiento) de la página.
Y ahora el CSS:
Y el CSS igual de sencillo, lo más importante es: la posición fija (position:fixed), el z-index menor que todos los demás de la página (ya que estarán como fondo) y el width siempre en porcentaje. Así de fácil.
En esta página podéis ver el ejemplo. Cambiando el tamaño de la ventana del navegador podréis ver que el fondo se adapta (hasta cierto límite).
En primer lugar el código HTML5:
<body>
<img id="imgback" src="images/fondolatierra.jpg" alt="la tierra">
<header id="cabecera">
<h1>
<a title="Las edades de la tierra en millones de años,cenozoico, paleozoico, mesozoico, jurasico, precambrico" href="#">
<img id="imgcabecera" alt="las edades de la tierra" src="images/lasedadesdelatierra.png"></a>
</h1>
</header>
El HTML es sencillo (y el CSS también lo será). Inmediatamente después de la etiqueta 'body' insertamos la imagen de fondo con un 'id'. Después, dentro de la etiqueta 'header' incluimos la imagen (también con un 'id') que nos servirá de título de la página. Esta última imagen es bueno incluirla dentro de las etiquetas 'h1' y 'a' con un 'title' ya que influirá en el SEO (posicionamiento) de la página.
Y ahora el CSS:
#cabecera {
clear: left;
float: left;
height: 200px;
overflow: visible;
position: relative;
}
#imgcabecera {
position: fixed;
z-index: 1;
top: 0px;
left: 5%;
width: 90%;
}
#imgback {
position: fixed;
z-index: -1;
top: 150px;
left: 0;
width: 100%;
}
Y el CSS igual de sencillo, lo más importante es: la posición fija (position:fixed), el z-index menor que todos los demás de la página (ya que estarán como fondo) y el width siempre en porcentaje. Así de fácil.
En esta página podéis ver el ejemplo. Cambiando el tamaño de la ventana del navegador podréis ver que el fondo se adapta (hasta cierto límite).
Grande Jose
ResponderEliminarBien detallado y explicado, sólo un pero, el link de ejemplo no va.
Saludos
Es cierto que no va, lo siento, he cambiado de servidor y no he actualizado el enlace. Ahora está actualizado.
ResponderEliminarMuy iteresante gracias me servira de mucho
ResponderEliminar