Foros del Web » Creando para Internet » CSS »

como poner una imagen de fondo liquido

Estas en el tema de como poner una imagen de fondo liquido en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/04/2010, 22:39
 
Fecha de Ingreso: junio-2009
Mensajes: 231
Antigüedad: 8 años, 6 meses
Puntos: 1
Pregunta como poner una imagen de fondo liquido

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
  #2 (permalink)  
Antiguo 20/04/2010, 22:53
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Respuesta: como poner una imagen de fondo liquido

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
__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 21/04/2010, 08:32
 
Fecha de Ingreso: junio-2009
Mensajes: 231
Antigüedad: 8 años, 6 meses
Puntos: 1
Respuesta: como poner una imagen de fondo liquido

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

?
  #4 (permalink)  
Antiguo 21/04/2010, 08:39
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: como poner una imagen de fondo liquido

http://www.araudi.net/ejemplos/fondo_elastico.html
  #5 (permalink)  
Antiguo 22/04/2010, 06:01
 
Fecha de Ingreso: junio-2009
Mensajes: 231
Antigüedad: 8 años, 6 meses
Puntos: 1
Respuesta: como poner una imagen de fondo liquido

Hola Alex

increible tu ayuda muchas gracias

Karma para ti
  #6 (permalink)  
Antiguo 22/04/2010, 15:07
 
Fecha de Ingreso: junio-2009
Mensajes: 231
Antigüedad: 8 años, 6 meses
Puntos: 1
Respuesta: como poner una imagen de fondo liquido

Alex una cosita.

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

Saludos
  #7 (permalink)  
Antiguo 22/04/2010, 15:48
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: como poner una imagen de fondo liquido

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
  1. <img src="bg.jpg" class="img_bg" alt="Fondito" />
  2. <div class="all">
  3. <div class="cont">
  4. tu contenido
  5. </div>
  6. </div>
Código CSS:
Ver original
  1. * {margin:0;padding:0;position:relative;}
  2. html, body{width:100&#37;;height:100%;overflow:hidden;}
  3. .img_bg{width:100%;height:100%;position:absolute;z-index:1;}
  4. .all{width:100%;height:100%;overflow:auto;left:0;top:0;z-index:2;}
  5. .cont{width:80%; margin:0 auto;}
  #8 (permalink)  
Antiguo 22/04/2010, 16:01
 
Fecha de Ingreso: junio-2009
Mensajes: 231
Antigüedad: 8 años, 6 meses
Puntos: 1
Respuesta: como poner una imagen de fondo liquido

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?
  #9 (permalink)  
Antiguo 22/04/2010, 16:24
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: como poner una imagen de fondo liquido

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
  #10 (permalink)  
Antiguo 22/04/2010, 19:30
 
Fecha de Ingreso: junio-2009
Mensajes: 231
Antigüedad: 8 años, 6 meses
Puntos: 1
Respuesta: como poner una imagen de fondo liquido

Bueno Alex....

la verdad no tengo palabras.

me encuentro muy agradecido con tigo

de verdad muchas gracias por tu ayuda

Saludos
  #11 (permalink)  
Antiguo 22/04/2010, 21:22
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: como poner una imagen de fondo liquido

Que bueno que te funcione

Etiquetas: fondo, poner
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 00:11.