Foros del Web » Creando para Internet » CSS »

Adaptar fondo web a resolución de pantalla 2

Estas en el tema de Adaptar fondo web a resolución de pantalla 2 en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 30/07/2011, 15:04
Avatar de ThunderWolf  
Fecha de Ingreso: julio-2011
Mensajes: 30
Antigüedad: 6 años, 3 meses
Puntos: 1
Adaptar fondo web a resolución de pantalla 2

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.
  #2 (permalink)  
Antiguo 31/07/2011, 04:36
Avatar de ThunderWolf  
Fecha de Ingreso: julio-2011
Mensajes: 30
Antigüedad: 6 años, 3 meses
Puntos: 1
Respuesta: Adaptar fondo web a resolución de pantalla 2

¡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
  #3 (permalink)  
Antiguo 10/09/2011, 06:09
Avatar de bananabalance  
Fecha de Ingreso: julio-2011
Ubicación: Madrid
Mensajes: 51
Antigüedad: 6 años, 3 meses
Puntos: 11
Respuesta: Adaptar fondo web a resolución de pantalla 2

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.
__________________
Posicionamiento Web en buscadores
Los Chocolates te apasionan!!!

Etiquetas: fondo
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 00:15.