Foros del Web » Creando para Internet » CSS »

ajustar imagen del body a resolucion de pantalla

Estas en el tema de ajustar imagen del body a resolucion de pantalla en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/04/2011, 07:46
 
Fecha de Ingreso: abril-2011
Mensajes: 13
Antigüedad: 6 años, 7 meses
Puntos: 0
ajustar imagen del body a resolucion de pantalla

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
  #2 (permalink)  
Antiguo 26/04/2011, 09:19
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: ajustar imagen del body a resolucion de pantalla

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
  1. #id_img_fondo{    
  2.     width: 100 % ; /* en porcentaje (el highlight del foro lo trasforma) */
  3.     height: 100 %;
  4.     top:0;
  5.     left:0;
  6.     position:fixed;
  7.     z-index: -1;  
  8. }
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 26/04/2011, 11:06
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 6 años, 8 meses
Puntos: 116
Respuesta: ajustar imagen del body a resolucion de pantalla

Cita:
Iniciado por maycolalvarez Ver Mensaje
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
  1. #id_img_fondo{    
  2.     width: 100 % ; /* en porcentaje (el highlight del foro lo trasforma) */
  3.     height: 100 %;
  4.     top:0;
  5.     left:0;
  6.     position:fixed;
  7.     z-index: -1;  
  8. }
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.
__________________
Programador jQuery & PHP
  #4 (permalink)  
Antiguo 26/04/2011, 14:20
Avatar de Tedel  
Fecha de Ingreso: enero-2011
Ubicación: Lima
Mensajes: 2.728
Antigüedad: 6 años, 10 meses
Puntos: 442
Respuesta: ajustar imagen del body a resolucion de pantalla

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.
__________________
Soy el autor de Heptagrama y tengo un servicio "todo incluido" de marketing web.
  #5 (permalink)  
Antiguo 26/04/2011, 14:21
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: ajustar imagen del body a resolucion de pantalla

yo uso
Cita:
#fondo {
position:fixed;
top:-50%;
left:-50%;
width:100%;
height:200%;
}
  #6 (permalink)  
Antiguo 27/04/2011, 05:18
 
Fecha de Ingreso: abril-2011
Mensajes: 13
Antigüedad: 6 años, 7 meses
Puntos: 0
Respuesta: ajustar imagen del body a resolucion de pantalla

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
  #7 (permalink)  
Antiguo 27/04/2011, 07:27
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: ajustar imagen del body a resolucion de pantalla

como poder, sí que se puede
Cita:
body {
background-image: url('img');
background-repeat: repeat-y;
width: 100%;
}
  #8 (permalink)  
Antiguo 27/04/2011, 07:51
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: ajustar imagen del body a resolucion de pantalla

Cita:
Iniciado por ogferreiro Ver Mensaje
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
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #9 (permalink)  
Antiguo 27/04/2011, 09:30
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 6 años, 8 meses
Puntos: 116
Respuesta: ajustar imagen del body a resolucion de pantalla

Cita:
Iniciado por maycolalvarez Ver Mensaje
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
__________________
Programador jQuery & PHP
  #10 (permalink)  
Antiguo 27/04/2011, 09:41
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: ajustar imagen del body a resolucion de pantalla

Cita:
Iniciado por ZoroRoronoa Ver Mensaje
Y debido a que no puede estirarse sin usar <img>, no podras ajustarla a la res. de pantalla
Exacto!
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...

Etiquetas: body, pantalla
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 16:56.