Buenos días,
tengo un pequeño problema, el caso es que necesito una imágen de fondo expandida para mi página web..
Tras buscar documentación al respecto y hacer unas cuantas pruebas he conseguido implementar la imagen de manera expandida y para todas las resoluciones (si redimensionas, la imagen también lo hace).
Lo hago de la siguiente manera.
html:
Código:
<html>
<head>
<title> HMDC </title>
<link rel="StyleSheet" href="style.css" type="text/css" media="screen">
</head>
<body>
<!-- Imágen de fondo Cargada a resolucion adecuada -->
<img id="imagen_de_fondo" src="imagenes/fondo.jpg"></img>
<!-- Contenido -->
<ul class="navegador">
<li><a href="#">Opción 1</a></li>
<li><a href="#">Opción 2</a></li>
<li><a href="#">Opción 3</a></li>
<li><a href="#">Opción 4</a></li>
</ul>
<!-- Pie de página -->
</body>
</html>
css:
Código:
img#imagen_de_fondo {
/* Rellenamos el fondo */
min-height: 100%;
min-width: 800px;
/* Escalamiento proporcional */
width: 100%;
height: auto;
/* Posicionamiento */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 800px) {
/* Hacemos la búsqueda y si coincide modificamos las propiedades */
img#imagen_de_fondo {
left: 50%;
margin-left: -400px;
/* Agregamos un margen negativo que represente el 50% */
}
}
Funciona perfecto, el problema viene ahora,
No consigo seguir maquetando mi página web, lo que escribo no aparece...
El caso es que al parecer la etiqueta <img> se come las cosas, es decir, que implementa la imagen por encima del resto de las cosas.
¿Como puedo solucionarlo?
Un saludo, y gracias.