Ver Mensaje Individual
  #12 (permalink)  
Antiguo 19/05/2008, 12:10
Avatar de Mikmoro
Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: Aplicar imagen de fondo a toda la página

Cita:
Iniciado por makos83 Ver Mensaje
Gracias Mikel por el apunte; lo he probado y no termina de funcionarme y como ya dije es una aplicación ya desarrollada y tengo un poco de prisa por lo que no puedo perder mucho más tiempo en este tema por lo que he pensado otra solución; pero agradecería que alguien me comentara cómo conseguir el efecto de la página que ha puesto juaniquillo que también me podría venir bastante bien.

Un saludo y gracias por vuestra ayuda.
La solución que aportaba juaniquillo, es un bonito truco, haciendo que el contenido esté en una caja con scroll, lo que hace parecer que la página baja y el fondo queda estático, pero no es así; es que sólo la caja de contenido es la que hace scroll dando esa sensación.

El código es este, y es más bien entendible Si algo no lo ves claro pregunta y te echaremos una mano.

Cita:
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:5px 300px 20px 200px;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
#fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000; padding:10px;}
</style>
</head>

<body>

<div>
<img id="background" src="rabbit.jpg" alt="" title="" />
</div>
<div id="fixed">
<p>The background image is always 100% x 100% (body size). But it only works with a 100% x 100% html/body.</p>
<p><a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=100% background image" title="Your comments">Comments</a></p>

</div>
<div id="scroller">
<div id="content">

<h1>ALICE'S ADVENTURES IN WONDERLAND</h1>... etc.
Mikel.