Hola, primero de todo decirles que soy nuevo en este foro, y que mi experiencia como diseñador web recien comienza. Así pues comprendan que mis conocimentos todavia son limitados. y despues me gustaria agradecer de antemano las respuestas y sugerencias.
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:
<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:
@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;
}
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.
¿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.