Imagen de fondo adaptable

Escrito por Programador ASP clásico en Hojas de estilo CSS


Este artículo explica como tener una imágen de fondo adaptable, es decir, desplazarse por una página mientras la imagen permanece estirado y fijado. Vamos a utilizar algunas líneas de CSS y dos etiquetas HTML. La imagen Sólo tiene que colocar su imagen justo antes de la etiqueta </ body>:

<div align=”center” > <img src=”images/fondo.jpg” border=”0″ class=”bg” > </div>

La imagen tiene un class = “bg”. Ahí es donde la mayor parte de la magia es. Ahora, justo antes de que el fragmento anterior, colocar un div: ese será nuestro contenedor principal. Para que quede claro, vamos a poner todo el resto de la página (artículos, imágenes, etc) dentro de ese div. Vamos a diseñarlo así, después.

<div class="maincontainer">Todo tu contenido aquí mero!</div>

Vamos a ver cómo el estilo de estos dos elementos. CSS Lo que básicamente se necesita es: 1) colocar la imagen en el fondo; 2) colocar el contenedor principal en la parte superior. Veamos el código:

<style type=”text/css”> 
.bg {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -5000;
height: 100%;
}
.maincontainer {
height: 1000px;
z-index: 5000;
 }
</style>

En primer lugar, el contenedor principal tiene una altura de 1000px. Eso es sólo para el ejemplo: usted no lo necesita porque el div se extenderá de acuerdo con su contenido. La imagen (.bg class) tiene una posición fija y un z-index -5000, mientras que el contenedor principal tiene 5.000 valor de z-index. Esto se debe a que tenemos la imagen de permanecer en el fondo.

o bien para que la imágen se mueve con el scrollbar:

<style type=”text/css”>
.bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -5000;
}
</style>

Publicado el 10/09/2014 a las 13:50:22 hrs. | 487 visitas.

Subir
Web hosting by Somee.com