expandir imagen

lukas4 · #1 (**permalink**) 05/03/2009, 10:31

hola que tal, ya despues de tantas preguntas que he hecho aqui, ya hasta me siento mal

pero pues ya he aprendido bastante :D, el asunto es que tengo una imagen de fondo pero solo llega hasta la mitad de la pagina, mi duda es, como puedo hacer para que esa imagen se expanda hasta que cubra toda la pantalla? de antemano gracias

Raulmmmm · #2 (**permalink**) 05/03/2009, 11:12

Puedes mirar el código de esta página:
http://www.cssplay.co.uk/layouts/background.html
Fíjate sobre todo en la cabecera (entre <head> y </head>):

Código HTML:

<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>

Y en poner justo después de <body> esto:

Código HTML:

<img id="background" src="rabbit.jpg" alt="" title="" />

lukas4 · #3 (**permalink**) 05/03/2009, 11:51

pues es justamente lo que busco, solo que me pone la imagen encima de mis tablas y solo se alcanza a observar un pedazo de la tabla :S

Mikmoro · #4 (**permalink**) 06/03/2009, 11:33

A ver si lo ves más fácil con este ejemplo o con este otro.

lukas4 · #5 (**permalink**) 06/03/2009, 13:02

gracias mokmoro, como que ya le agarre mas la onda, ya casi queda, solo que me quita el menu, te dejo parte del codigo, para ver si me puedes decir en que me esta fallando:

Código HTML:

<style type="text/css">
#caja{
	position:absolute;
	left: 0;
	top: 0;
	width:100%;	
}
#caja img{
	width:100%;
	height:100%;
}
.texto{
	font-size:12;
	font-face:Times;
	position:absolute;
}

</style>


<body>

<div id="caja"><img src="fondo_tabla2.gif" /></div>

<div id="header">
	<ul>

		<li id="current"><a href="pagina.php">pagina1</a></li>

		<li><a href="pagina2.php">pagina2l</a></li>

		<li><a href="#">Proxy-adsl 2</a></li>

	</ul>

</div>

<div class="texto">
<form method="post" action="pagina1.php">
<table width="100%" bgcolor="#ffffff" border="0">
  <misdemascosas>blablabla</misdemascosas>
</table>
</div>

el primer div es un menu, y ese el que no me aparece cuando pongo el codigo del ejemplo que me pusiste, y aparte de que la anchura de la tabla se cambia :S se queda a la mitad de la anchura del navegador

lukas4 · #6 (**permalink**) 06/03/2009, 13:15

ya funciono!! me falto este codigo para el header en el style:

Código HTML:

#header{
   position:relative;
}

y tambien cambiar el absolute del .texto por un relative, el unico problema ahora, es que se agrando el espacio vertical, es decir, se muestra todo tal y como debe ser, solo que me queda un espacio en el navegador sin nada (solo el fondo) :S