estoy creando mi primera página web (muy simple porque estoy aprendiendo) y tengo que realizar un menú con una imagen de fondo.
En mi archivo .css tengo este código:
header {
background-image: url(img/fondo_menu2.gif);
font-family: 'Arial';
font-size: 1em;
}
Viendo mi página web me devuelve esta imagen:
Aquí viene mi problema
Cuando sigo metiendo código a mi .css desaparece la imagen, os lo muestro.
header {
background-image: url(img/fondo_menu2.gif);
font-family: 'Arial';
font-size: 1em;
}
nav {
float: left;
}
nav ul {
list-style: none;
overflow: hidden;
}
nav ul li {
float: left;
font-family: Arial;
font-size: 1em;
}
nav ul li a {
font-weight: bold;
display: block;
padding: 10px;
text-decoration: none;
}
El resultado que me da es el siguiente:
Por una parte, se me colocan las páginas, pero por otra, pierdo mi imagen de fondo.
No consigo resolver este pequeño problema.
El código HTML con el que estoy trabajando es el siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagina web</title>
<link rel="stylesheet" href="menu.css">
</head>
<body>
<header>
<div>
<nav>
<ul>
<li> <a href="#">Inicio</a></li>
<li> <a href="#">Tablas</a></li>
<li> <a href="#">Formularios</a></li>
<li> <a href="#">Página Personal</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>