Adaptar fondo web a resolución de pantalla 2

ThunderWolf · #1 (**permalink**) 30/07/2011, 15:04

Mi problema viene desde:
http://www.forosdelweb.com/f53/adaptar-fondo-web-resolucion-pantalla-910665/#post3944512

El siguiente código funciona divinamente en chrome y firefox, pero en IE aparece toda la página vacía. Se trata de un fondo fijo que se adapta al tamaño de la ventana:

CSS

Código:

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

HTML

Código:

<div>
<img src="http://...fondo.jpg" id="fondo" alt="">
</div>
<div id="sitio">
(El resto de la página web)
</div>

He probado todos los doctype posibles, pero el resultado es idéntico en cada caso. De momento lo he dejado en el 4.01 transicional:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

¿Que tendría que hacer para que también funcione en IE, sin usar nada de javascript ni jquery? No importa que la imagen se deforme o se pixele.

ThunderWolf · #2 (**permalink**) 31/07/2011, 04:36

¡Problema resuelto!

Os vais a reir (por no llorar)
Este era el fallo:

Código:

<style type="text/css">
<!--

Con razón salía la página en blanco... ¡todo ella era un comentario!

Para aprovechar el hilo, voy a dejar el código algo más refinado por si le sirve a alguien:

CSS

Código:

html,body {
	margin: 0;
	padding: 0;
	height: 100%;
}
#fondo {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#sitio {
	position: relative;
	padding: 10px;
	z-index: 1;
}

HTML

Código:

<div id="fondo">
<img src="http://...fondo.jpg" width="100%" height="100%">
</div>
<div id="sitio">
[Aqui el resto de la página]
</div>

Mis disculpas

bananabalance · #3 (**permalink**) 10/09/2011, 06:09

Para evitar este tipo de errores puedes usar como editor http://notepad-plus-plus.org/ es gratis y muy bueno, si defines el lenguaje html o xml, el editor te pone en verde los comentarios.