Foros del Web » Creando para Internet » CSS »

Adaptar fondo de web a resolución de pantalla

Estas en el tema de Adaptar fondo de web a resolución de pantalla en el foro de CSS en Foros del Web. Hola a todos. Hace algún tiempo estuve buscando por la red la forma de poner una imagen de fondo en mi web que se adaptara ...
  #1 (permalink)  
Antiguo 08/05/2011, 06:16
 
Fecha de Ingreso: febrero-2009
Mensajes: 10
Antigüedad: 8 años, 1 mes
Puntos: 1
Adaptar fondo de web a resolución de pantalla

Hola a todos.
Hace algún tiempo estuve buscando por la red la forma de poner una imagen de fondo en mi web que se adaptara a todas las resoluciones de pantalla para que ocupara todo el espacio sin repetirse como mosaico ni nada de eso.
Encontré varias formas de hacerlo pero casi ninguna me funcionó, y al final tuve que elegir este código de CSS:


Cita:
<style type="text/css">
<!--
body {
background-image: url(imagen.jpg);
}
#bg {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
}
-->
</style>
Era la única que parecía que funcionaba. Sin embargo el otro día visité mi web desde un ordenador con una versión antigua del internet explorer y pude comprobar que la web quedaba totalmente descuadrada ya que primero mostraba la imagen de fondo, y tenías que bajar (haciendo scroll) hasta el final de la imagen para empezar a ver el contenido de la web.
¿Sabéis alguna manera de solucionar esto?.
  #2 (permalink)  
Antiguo 09/05/2011, 16:47
Avatar de Uncontroled_Duck
Colaborador
 
Fecha de Ingreso: mayo-2011
Ubicación: Málaga [Spain]
Mensajes: 806
Antigüedad: 5 años, 10 meses
Puntos: 261
Respuesta: Adaptar fondo de web a resolución de pantalla

Hay varias formas de poner imágenes de fondo y que se ajusten a las dimensiones, pero eso te supone una estructura bien organizada.
Ya que las imágenes al cambiar de resolución pierden calidad visual, se pixelan y se deforman en algunos casos.
Así que te recomiendo que te plantes que imagen quieres de fondo y si es tan necesario que cambie de resolución.

A lo que vamos, en el código que pones estas poniendo una imagen de fondo al body y el resto de propiedades a un id.

Si es por motivos de reusar ese id vale, pero reúne las propiedades en un solo id o en el body.

Igual tiene su sentido, pero al no ver como lo utilizas en el código no le veo mucha utilidad el tenerlo de esa forma.

De todas formas es hablar por hablar, pues al no saber que imagen es, cuanto ocupa, etc. solo estoy especulando.

Si pones algo más de información puede ser más sencillo orientarte sobre el tema.

Saludos,
__________________
Todos agradeceremos que pongas el código en su respectivo Highlight
  #3 (permalink)  
Antiguo 10/05/2011, 09:37
 
Fecha de Ingreso: febrero-2009
Mensajes: 10
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: Adaptar fondo de web a resolución de pantalla

La imagen de fondo es esta: [URL="http://www.semanasantaavila.com/bg.jpg"]http://www.semanasantaavila.com/bg.jpg[/URL], y sus dimensiones son 1800x1152 pixels. Como puedes ver es un mosaico, por lo que no me importa mucho que se deforme al adaptarse a algunas resoluciones.
Te dejo también la página web donde está la imagen: [URL="http://www.semanasantaavila.com/inicio.htm"]http://www.semanasantaavila.com/inicio.htm[/URL].
Supongo que al generarse una capa id con ese código, como me comentas, es lo que ocasiona que en determinados navegadores se vea como una imagen independiente al resto de la web. ¿Cómo podría reunir las propiedades en el body?. ¿eso arreglaría el problema?.

Última edición por inad84; 10/05/2011 a las 09:43 Razón: Corrección enlaces
  #4 (permalink)  
Antiguo 17/05/2011, 10:26
 
Fecha de Ingreso: febrero-2009
Mensajes: 10
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: Adaptar fondo de web a resolución de pantalla

No consigo solucionar el problema. ¿Me recomendáis quitar el fondo y colocar un mosaico normal que se repita?. No quedará tan bien, pero si no hay otra manera de arreglarlo.
  #5 (permalink)  
Antiguo 17/05/2011, 11:03
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.619
Antigüedad: 9 años, 1 mes
Puntos: 907
Respuesta: Adaptar fondo de web a resolución de pantalla

prueba con:
Código CSS:
Ver original
  1. html,body{margin:0;padding:0;height:100&#37;;}
  2. body{overflow:hidden;}
  3. #fondo,#sitio{width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1;}
  4. #sitio{z-index:1;overflow:auto;}

Código HTML:
Ver original
  1. <img src="url del fondo" alt="texto alternativo" id="fondo" />
  2. <div id="sitio">todo el contendió de tu sitio</div>

y no olvides declarar un doctype valido, si usas strict la imagen deberá ir dentro de un div

nota: el &#37 ; es el signo de porcentaje
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #6 (permalink)  
Antiguo 18/05/2011, 16:29
 
Fecha de Ingreso: diciembre-2007
Mensajes: 104
Antigüedad: 9 años, 2 meses
Puntos: 4
Respuesta: Adaptar fondo de web a resolución de pantalla

Prueba:

Código HTML:
Ver original
  1. body {
  2.    overflow:hidden;
  3.    margin:0px;
  4.    padding:0px;
  5.    background:url('ruta/a_imagen.gif') no-repeat center center;
  6. }
__________________
Blink Estudio
Páginas web profesionales, modernas y económicas.
www.blinkestudio.com
  #7 (permalink)  
Antiguo 30/07/2011, 10:31
Avatar de ThunderWolf  
Fecha de Ingreso: julio-2011
Mensajes: 30
Antigüedad: 5 años, 8 meses
Puntos: 1
Respuesta: Adaptar fondo de web a resolución de pantalla

Gracias Ag666, funciona perfectamente en chrome y firefox; ahí te va algo de karma

El problema es que en IE9 sale toda la página en blanco...

Última edición por ThunderWolf; 30/07/2011 a las 10:36 Razón: Fallo en IE9
  #8 (permalink)  
Antiguo 30/07/2011, 10:55
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.619
Antigüedad: 9 años, 1 mes
Puntos: 907
Respuesta: Adaptar fondo de web a resolución de pantalla

Cita:
Iniciado por ThunderWolf Ver Mensaje
Gracias Ag666, funciona perfectamente en chrome y firefox; ahí te va algo de karma

El problema es que en IE9 sale toda la página en blanco...
1.- utilizas un doctype valido?

2.- sin ver tu código en cuestión HTML + CSS no te podemos ayudar (el código que se muestra en el navegador)

3.- crea un nuevo tema para plantear tus dudas, no es bueno ni bien visto utilizar los temas de otros para resolver tus dudas aun cuando tengan relación o no con tus dudas

4.- gracias por el karma
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #9 (permalink)  
Antiguo 30/07/2011, 12:50
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 9 meses
Puntos: 1567
Respuesta: Adaptar fondo de web a resolución de pantalla

Una solucion posible:

http://www.forosdelweb.com/f53/image...4/#post3944259


__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #10 (permalink)  
Antiguo 31/07/2011, 04:59
Avatar de ThunderWolf  
Fecha de Ingreso: julio-2011
Mensajes: 30
Antigüedad: 5 años, 8 meses
Puntos: 1
Respuesta: Adaptar fondo de web a resolución de pantalla

Corrijo; si funciona en IE, el que no funcionaba era yo
Tenia un pequeño gran fallo en el código; solucionado.

Etiquetas: fondo, pantalla, resolución, adaptador
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 12:50.