Adaptar fondo de web a resolución de pantalla

[inad84]

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:

<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?.

[Uncontroled_Duck]

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,

[inad84]

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?.

[inad84]

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.

[ArturoGallegos]

prueba con:

Código CSS:

html,body{margin:0;padding:0;height:100%;}
body{overflow:hidden;}
#fondo,#sitio{width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1;}
#sitio{z-index:1;overflow:auto;}
 

Código HTML:

<img src="url del fondo" alt="texto alternativo" id="fondo" />
<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

[nakiox]

Prueba:

Código HTML:

body {
   overflow:hidden;
   margin:0px;
   padding:0px;
   background:url('ruta/a_imagen.gif') no-repeat center center;
}
 

[ThunderWolf]

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...

[ArturoGallegos]

Iniciado por ThunderWolf

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

[emprear]

Una solucion posible:

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

[ThunderWolf]

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