como poner una imagen de fondo liquido

autista · #1 (**permalink**) 20/04/2010, 21:39

Hola necesito hacer una imagen de fondo líquido sea como sea

Solo la imagen de fondo se debe acomodar y cubrir toda la pantalla no importa cual sea la resolución usada o de la forma en que esta abierto el navegador

Ojala alguien me pueda dar una idea

Puedo hacer esto de alguna forma?

gracias

emiliodeg · #2 (**permalink**) 20/04/2010, 21:53

y bueno un fondo se pone de la siguiente forma

background: transparent url(imagenDeFondo.jpg) repeat 0 0;

el problema del fondo liquido es q tienes q tener una imagen suficientemente grande como para abarcar toddas las resoluciones o buscar una imagen q cumple algun patrón de repetion y repetirla

esta como muy acotada la info q presentas como para poder ayudarte mas
saludos

autista · #3 (**permalink**) 21/04/2010, 07:32

Pero esto con liquido nada que ver, no?

Bueno supangamos que tengo una imagen que cumpla con el ancho de la resoluccion mas ancha.

Como puedo hacer que sea liquido

?

alexk · #4 (**permalink**) 21/04/2010, 07:39

http://www.araudi.net/ejemplos/fondo_elastico.html

autista · #5 (**permalink**) 22/04/2010, 05:01

Hola Alex

increible tu ayuda muchas gracias

Karma para ti

autista · #6 (**permalink**) 22/04/2010, 14:07

Alex una cosita.

esto no va con el ie 6 y el 7 alguien sabe como hacer para que funcione con estos navegadores

Saludos

alexk · #7 (**permalink**) 22/04/2010, 14:48

extraño... se le paso mik... pero en ie7 esta bien... solo ie6 da problemas...
probe con lo siguiente y me funciono... intenta y nos cuentas...

Código HTML:

Ver original<img src="bg.jpg" class="img_bg" alt="Fondito" />
<div class="all">
<div class="cont">
tu contenido
</div>
</div>

Código CSS:

Ver original* {margin:0;padding:0;position:relative;}
html, body{width:100&#37;;height:100%;overflow:hidden;}
.img_bg{width:100%;height:100%;position:absolute;z-index:1;}
.all{width:100%;height:100%;overflow:auto;left:0;top:0;z-index:2;}
.cont{width:80%; margin:0 auto;}

autista · #8 (**permalink**) 22/04/2010, 15:01

Hola Alex.

Disculpa pero veo un poco consfusas tus modificacones

este es el codigo original

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Fondo de pagina elastico - Recursos CSS - araudi.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="recursos, css, diseño web, xhtml, software libre" />
<meta name="Description" content="Fondo de pagina elastico - Recursos CSS - araudi.net" />
<meta name="Author" content="Mikel Morote Donazar - Praxis Iru&ntilde;ea SLL" />
<meta name="Subject" content="Recursos CSS" />
<meta name="Language" content="espa&ntilde;ol" />
<meta name="Robots" content="index, follow" />
<link rel="alternate" href="http://www.araudi.net/indice.html" title="Indice de contenidos" media="all" lang="es" />
<style type="text/css"> 
#caja { position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
#caja img { width: 100%;
height: 100%;
}
.texto { color: #f00;
font-size: 30px;
position: relative;
}
</style>
</head>
<body>
<div id="caja"><img src="http://www.forosdelweb.com/f53/img/270650_hello_my_friend.jpg" alt="Imagen de un apretón de manos, un blanco y un negro" /></div>
<div class="texto">El contenido quedar&aacute; sobre la
capa de la imagen</div>
</body>
</html>

creo que con el css no tendria problemas pero con lo otro. como quedaria?

alexk · #9 (**permalink**) 22/04/2010, 15:24

no entiendo que te confunde, simplemente quito el scroll al body y lo aplico a un div,
no es una modificacion... solo que lo hago un poco diferente que mikmoro...
para que funcione en ie6 y no me ah dado problemas...
Imagen estirada

autista · #10 (**permalink**) 22/04/2010, 18:30

Bueno Alex....

la verdad no tengo palabras.

me encuentro muy agradecido con tigo

de verdad muchas gracias por tu ayuda

Saludos

alexk · #11 (**permalink**) 22/04/2010, 20:22

Que bueno que te funcione