Foros del Web » Creando para Internet » HTML »

expandir imagen

Estas en el tema de expandir imagen en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/03/2009, 10:31
Avatar de lukas4  
Fecha de Ingreso: octubre-2008
Ubicación: frente al pc
Mensajes: 496
Antigüedad: 9 años, 1 mes
Puntos: 12
Pregunta expandir imagen

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
  #2 (permalink)  
Antiguo 05/03/2009, 11:12
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Respuesta: expandir imagen

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="" /> 
  #3 (permalink)  
Antiguo 05/03/2009, 11:51
Avatar de lukas4  
Fecha de Ingreso: octubre-2008
Ubicación: frente al pc
Mensajes: 496
Antigüedad: 9 años, 1 mes
Puntos: 12
Respuesta: expandir imagen

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
  #4 (permalink)  
Antiguo 06/03/2009, 11:33
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: expandir imagen

A ver si lo ves más fácil con este ejemplo o con este otro.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 06/03/2009, 13:02
Avatar de lukas4  
Fecha de Ingreso: octubre-2008
Ubicación: frente al pc
Mensajes: 496
Antigüedad: 9 años, 1 mes
Puntos: 12
Respuesta: expandir imagen

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
  #6 (permalink)  
Antiguo 06/03/2009, 13:15
Avatar de lukas4  
Fecha de Ingreso: octubre-2008
Ubicación: frente al pc
Mensajes: 496
Antigüedad: 9 años, 1 mes
Puntos: 12
Respuesta: expandir imagen

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:05.