Imagen de fondo en cualquier resolucion

Serralta · #1 (**permalink**) 03/01/2011, 12:10

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

caricatos · #2 (**permalink**) 03/01/2011, 12:16

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

KurozakiIchigo · #3 (**permalink**) 03/01/2011, 12:43

por kseso?
http://css.devillasbuenas.es/fondo-100/1-fondo-100.html

iwexcoder · #4 (**permalink**) 03/01/2011, 13:23

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/

caricatos · #5 (**permalink**) 03/01/2011, 16:30

Cita:

Iniciado por iwexcoder

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

Serralta · #6 (**permalink**) 03/01/2011, 17:31

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

KurozakiIchigo · #7 (**permalink**) 03/01/2011, 20:21

Cita:

Iniciado por Serralta

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

es:

img {
...
}

y no creo que sea necesario meterla en un div

caricatos · #8 (**permalink**) 03/01/2011, 21:42

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

caricatos · #9 (**permalink**) 03/01/2011, 21:43

Tema movido desde Web general

kseso? · #10 (**permalink**) 04/01/2011, 07:25

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)

KurozakiIchigo · #11 (**permalink**) 04/01/2011, 09:52

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