ajustar imagen del body a resolucion de pantalla

ogferreiro · #1 (**permalink**) 26/04/2011, 06:46

Buenas a todos,
mi problema es el siguiente:
en mi página web tengo una imagen de fondo, la imagen está como fondo del body con el siguiente estilo:

body {
background: url("rutaimagen") no-repeat;
}

el problema que tengo es que la resolución de la imagen es mas grande que el tamaño de ventana del navegador, si alguien tiene una solucion para poder ajustar esa imagen de fondo con estilos css....... lo que necesito es que la imagen estea puesta y ajustada solo con css y no se como hacerlo

gracias de antemano

maycolalvarez · #2 (**permalink**) 26/04/2011, 08:19

la única forma (si es que no existen otras) es usar un img para que pueda "estirar" la imágen, y en efecto con este CSS:

Código CSS:

Ver original#id_img_fondo{    
    width: 100 &#37; ; /* en porcentaje (el highlight del foro lo trasforma) */
    height: 100 %;
    top:0;
    left:0;
    position:fixed;
    z-index: -1;   
}

ZoroRoronoa · #3 (**permalink**) 26/04/2011, 10:06

Cita:

Iniciado por maycolalvarez

la única forma (si es que no existen otras) es usar un img para que pueda "estirar" la imágen, y en efecto con este CSS:

Código CSS:

Ver original#id_img_fondo{    
    width: 100 &#37; ; /* en porcentaje (el highlight del foro lo trasforma) */
    height: 100 %;
    top:0;
    left:0;
    position:fixed;
    z-index: -1;   
}

para complementar, cabe mencionar que la etiqueta <img> donde colocaras dicha imagen.

Debe ser el primer tag despues del <body>, y abajo de este colocas ya todo el contenido de tu pagina

ejemplo:

<html>
<body>
<img src="images/miImagen.jpg" id="id_img_fondo" />

aca el contenido de tu pagina (los demas tags) <form><table><div> ETC ETC...

</body>
</html>

Saludos.

Tedel · #4 (**permalink**) 26/04/2011, 13:20

Yo usé esta en www.parejamillonaria.com

En el body:

<img id="fondo" src="pics/couple.jpg" alt="background image" />

En el CSS:

#fondo
{position: absolute; top: 0; left: 0; width: 100%; z-index: -1}

Espero ayude.

IsaBelM · #5 (**permalink**) 26/04/2011, 13:21

yo uso

Cita:

#fondo {
position:fixed;
top:-50%;
left:-50%;
width:100%;
height:200%;
}

ogferreiro · #6 (**permalink**) 27/04/2011, 04:18

gracias a todos, pero lo que buscaba era insertar la imagen en el fondo y ajustarla pero todo esto con css sin tenner que recurrir a la etiqueta <img>, con esto lo que pretendo conseguir es que non tenga que introducir en cada nuevo fichero de mi página esta lína <img> con toda la ruta
pero por lo que veo no se puede
gracias de todas formas

IsaBelM · #7 (**permalink**) 27/04/2011, 06:27

como poder, sí que se puede

Cita:

body {
background-image: url('img');
background-repeat: repeat-y;
width: 100%;
}

maycolalvarez · #8 (**permalink**) 27/04/2011, 06:51

Cita:

Iniciado por ogferreiro

gracias a todos, pero lo que buscaba era insertar la imagen en el fondo y ajustarla pero todo esto con css sin tenner que recurrir a la etiqueta <img>, con esto lo que pretendo conseguir es que non tenga que introducir en cada nuevo fichero de mi página esta lína <img> con toda la ruta
pero por lo que veo no se puede
gracias de todas formas

si se puede como te indicó @IsaBelM, lo que no se puede es estirarla con CSS

ZoroRoronoa · #9 (**permalink**) 27/04/2011, 08:30

Cita:

Iniciado por maycolalvarez

si se puede como te indicó @IsaBelM, lo que no se puede es estirarla con CSS

Y debido a que no puede estirarse sin usar <img>, no podras ajustarla a la res. de pantalla

maycolalvarez · #10 (**permalink**) 27/04/2011, 08:41

Cita:

Iniciado por ZoroRoronoa

Y debido a que no puede estirarse sin usar <img>, no podras ajustarla a la res. de pantalla

Exacto!