Foros del Web » Creando para Internet » CSS »

Imagen de fondo en cualquier resolucion

Estas en el tema de Imagen de fondo en cualquier resolucion en el foro de CSS en Foros del Web. Madre mia...a veces tan facil encontrar la solucion, y otras, no hay manera... Supongo que mas de uno de aquí lo tiene mas que superado ...
  #1 (permalink)  
Antiguo 03/01/2011, 12:10
 
Fecha de Ingreso: abril-2010
Mensajes: 47
Antigüedad: 7 años, 8 meses
Puntos: 1
Imagen de fondo en cualquier resolucion

Madre mia...a veces tan facil encontrar la solucion, y otras, no hay manera...

Supongo que mas de uno de aquí lo tiene mas que superado este problema.

Quiero poner una imagen de fondo y que asi como voy haciendo pequeña la pantalla se me haga pequeña la imagen.

Un dia entre en una pagina donde lo explicaban perfectamente, maldito ese dia que no lo puse en favoritos...

Lo del width y height en 100% no me vale, porque en pantallas mas pequeñas se me oculta parte de la imagen y hay detalles en ella que se tienen que ver...

A ver si alguien puede echarme una mano

Muchas gracias
  #2 (permalink)  
Antiguo 03/01/2011, 12:16
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Imagen de fondo en cualquier resolucion

Hola:

El truco es que la imagen sea el primer tag del documento, con los estilos top, left a 0 y width, height al 100%, y position absolute... no es imagen como estilo sino como etiqueta.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 03/01/2011, 12:43
 
Fecha de Ingreso: noviembre-2010
Ubicación: On a world of Anime & Web.
Mensajes: 137
Antigüedad: 7 años
Puntos: 4
Respuesta: Imagen de fondo en cualquier resolucion

por kseso?
http://css.devillasbuenas.es/fondo-100/1-fondo-100.html
  #4 (permalink)  
Antiguo 03/01/2011, 13:23
Avatar de iwexcoder  
Fecha de Ingreso: mayo-2009
Ubicación: San Carlos de Bariloche
Mensajes: 404
Antigüedad: 8 años, 6 meses
Puntos: 16
Respuesta: Imagen de fondo en cualquier resolucion

Puedes usar jquery que redimensiona las imagenes para cualquier resolucion de pantalla y sin alterar la calidad de las mismas....

http://johnpatrickgiven.com/jquery/background-resize/
__________________
iWexCoder.com - Programación - Desarrollo Movil - Programación Web www.iwexcoder.com
  #5 (permalink)  
Antiguo 03/01/2011, 16:30
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Imagen de fondo en cualquier resolucion

Cita:
Iniciado por iwexcoder Ver Mensaje
Puedes usar jquery que redimensiona las imagenes para cualquier resolucion de pantalla y sin alterar la calidad de las mismas....

http://johnpatrickgiven.com/jquery/background-resize/
¡Qué manía con las librerías...!

No dices la verdad. La calidad siempre se altera con estos trucos ... La única manera de que no se perdiera calidad es con programación por parte del servidor, pero siempre que sea una redimensión proporcional, cosa casi imposible.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #6 (permalink)  
Antiguo 03/01/2011, 17:31
 
Fecha de Ingreso: abril-2010
Mensajes: 47
Antigüedad: 7 años, 8 meses
Puntos: 1
Respuesta: Imagen de fondo en cualquier resolucion

Hola,

gracias por las respuestas.

A ver caricato, como dices tu, la cosa quedaria así si no me equivoco.

</head>

<body>

<div id="fondo">
<img src="images/fondo.jpg" />
</div>

</body>
</html>

Y así los CSS:

@charset "utf-8";
/* CSS Document */

#fondo{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
}

Lo siento, pero no me funciona, no lo entiendo...

gracias de nuevo
  #7 (permalink)  
Antiguo 03/01/2011, 20:21
 
Fecha de Ingreso: noviembre-2010
Ubicación: On a world of Anime & Web.
Mensajes: 137
Antigüedad: 7 años
Puntos: 4
Respuesta: Imagen de fondo en cualquier resolucion

Cita:
Iniciado por Serralta Ver Mensaje

#fondo{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
}
es:

img {
...
}

y no creo que sea necesario meterla en un div
  #8 (permalink)  
Antiguo 03/01/2011, 21:42
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Imagen de fondo en cualquier resolucion

Hola:

Un ejemplico:

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
	http://www.caricatos.net/probador
</title>
<style type="text/css" >
* {
margin: 0;
}
html, body {
height: 100%;
}
#fondo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
p {
 text-indent: 2em;
 margin: 0 1em;
}

</style>
</head>
<body>
<img src="../dibujos/miemoticon.gif" id="fondo" />
<p>
Aquí el resto de cosas...
</p>

</body>
</html>
Puedes probarlo aquí: Nuevo probador
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #9 (permalink)  
Antiguo 03/01/2011, 21:43
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Tema movido desde Web general
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #10 (permalink)  
Antiguo 04/01/2011, 07:25
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Imagen de fondo en cualquier resolucion

Pepe, creo que tenemos perdida la batalla frente a las librerías de js.

Al redimensionar una imagen para que sea tan grande con el elemento que la contiene hay que elegir entre:
o perder parte de algún lateral
o deformar la imagen (perder la relación ancho/alto)

Y la pérdida de calidad de la imagen estará estrechamente relacionada con el tamaño inicial y el final, acrecentado por la calidad inicial de la imagen (grado de comprensión)

KurozakiIchigo:
Cita:
y no creo que sea necesario meterla en un div
Todo depende del doctype. En strict un elemento de línea (como las imágenes) no pueden ser hijos directo del body. Fíjese en el segundo ejemplo http://css.devillasbuenas.es/fondo-100/2-fondo-100.html (el primero es el que usted enlazó en #3)
  #11 (permalink)  
Antiguo 04/01/2011, 09:52
 
Fecha de Ingreso: noviembre-2010
Ubicación: On a world of Anime & Web.
Mensajes: 137
Antigüedad: 7 años
Puntos: 4
Respuesta: Imagen de fondo en cualquier resolucion

Cita:
Cita:
y no creo que sea necesario meterla en un div
Todo depende del doctype. En strict un elemento de línea (como las imágenes) no pueden ser hijos directo del body. Fíjese en el segundo ejemplo http://css.devillasbuenas.es/fondo-100/2-fondo-100.html (el primero es el que usted enlazó en #3)
teneis razón

Etiquetas: fondo
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 13:11.