Doy por hecho que comprendes el significado de la regla body {}, simplemente para dar formato a la página con un color de fondo, letra, márgenes... Lo interesante son las reglas #contenedor, #contenido y #contenido2, cada una de ellas tiene una propiedad background y los mismos valores establecidos, comento estos valores de la propiedad background por si hay alguna duda:
fixed
Establecemos que la imagen permanezca inmóvil en la pantalla, de caso contrario seguiría el movimiento del "scroll" y desaparecería.
url(img/imgX.png)
Ruta para cargar la imagen, en este caso img1 para el contenedor e img2 para los contenidos.
0 0
Coordenadas Horizontal y vertical para la posición de la imagen en el documento. Debe ser igual en todos los bloques (contenedor, contenido y contenido2)
no-repeat
Evitamos que se repita la imagen.
Cabria destacar los valores fixed y 0 0. fixed establece la imagen fija en la pantalla para que no se mueva al subir o bajar el scroll, y los valores 0 0 hacen referencia a una posición horizontal y vertical en la pantalla, esta posición es la que permite crear el efecto de imagen cambiante, puesto que los valores 0 0 sitúan la imagen en la esquina superior izquierda de la ventana, tanto en el bloque contenedor como en los bloques de contenido. Por ultimo muestro el codigo completo del archivo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo Superposicion de Imagenes</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color:#000;
color:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:18px;
}
#contenedor {
margin: 0;
padding: 100px 0 0 0;
background:fixed url(img/img1.png) 0 0 no-repeat;
}
#contenido {
margin:5px 100px 5px 100px;
padding:10px;
border:1px solid #fff;
background:fixed url(img/img2.png) 0 0 no-repeat;
}
#contenido2 {
margin:50px 100px 5px 100px;
padding:10px;
border:1px solid #fff;
background:fixed url(img/img2.png) 0 0 no-repeat;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="contenido">
<h1>Titulo</h1>
<h2>Subtitulo</h2>
<p>Parrafo de contenido</p>
...
</div>
<div id="contenido2">
<h1>Titulo</h1>
<h2>Subtitulo</h2>
<p>Parrafo de contenido</p>
...
</div>
</div>
</body>
</html>
Usuarios que han visto este tema también han visto...
- Atributos y valores en css
- CSS y las tablas
- Barra de desplazamiento a la izquierda con CSS
- Colores en CSS
- Notas en imágenes utilizando CSS
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.