Mi problema:
Estoy montando una simple portada para una web, donde solo van haber (de momento) una imagen de fondo, la cual ocupará todo el fondo y se adaptará al mismo en función de la resolución del monitor del visitante. La imagen de fondo tiene una resolución de 1300x880 px. Y despues, en el centro habitará otra imagen, insertada en un div de 800x600 px, completamente centrada.
Pues todo esto parecia haberlo conseguido tras ver que con Explorer 7 se mostraba todo perfecto, PERO, no se por que motivo con Firefox 2 la imagen de fondo solo sale media imagen y desplazada arriba, quedando en la mitad de la pantalla inferior el color de fondo.
Aqui el codigo HTML:
Código:
Y aquí el código de la hoja de estilo CSS:<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pagina1</title>
<link href="estiloebp.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#logo {
position:absolute;
left: 50%;
top: 50%;
width: 800px;
height: 600px;
margin-top: -300px;
margin-left: -400px;
overflow: auto;
color: #666666;
z-index:1;
background-image: url(imagenes/logoebp.gif);
overflow: visible;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>
</head>
<body>
<center>
<div id="logo">
</div>
</center>
</body>
</html>
Código:
Repito mientras que IE Explorer muestra a la perfección la página, ocultando parte del fondo cuando el visitante no tiene suficiente resolución y centrando la capa de la imagen central. En Firefox la imagen de fondo solo sale la mitad de abajo pegada al margen superior. @charset "utf-8";
/* CSS Document */
body {
background-position: center center ; background-image: url(imagenes/fondoebp.gif); background-repeat: no-repeat; MARGIN: 0px; background-color: #000000;
}
¿Alguien sabe por que? ¿Qué debo hacer para solucionarlo? Gracias.
Añado: Si quito el valor "background-position: center center", la imagen de fondo en Firefox si sale entera, PERO esta queda pegada en sus margenes izquierda y superior, por lo que el visitante cuando reduce la resolución descentra el fondo.
Mode Lineal
