Susana Susana - 1 year ago 149
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.


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

width: 100%;
height: auto;

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


<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width">

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



<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>




Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download