Susana Susana - 1 month ago 14
CSS Question

background-image for header not working

Im trying to use a full screen image as my headers background but for some reason the image is not showing up and I cant figure out what im doing wrong. Can someone help? The image is in the same folder as the html and css files btw.

CSS

body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

#header{
background-image:url(headerbackground.png);
width: 100%;
height: auto;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
float: right;
}


HTML

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<title>Test</title>

<link rel="stylesheet" type="text/css" href="stylesheet.css">

</head>

<body>

<header>
<div id="header">

<ul class="col-4">
<li><a href="#">SOBRE</a></li>
<li><a href="#">TRABALHOS</a></li>
<li><a href="#">CONTACTO</a></li>
</ul>

</div>
</header>

</body>

</html>

Answer

Since you've given your header div (#header) no explicit height and floated the only child it has, it collapses and acts like it has no content. Either give it a height or add overflow:auto to the CSS rules for it.