CODEWITHSUNDEEP
htmlcss
Susana
Susana

Reputation: 3

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>

Upvotes: 0

Views: 61

Answers (2)

RizkiDPrast
RizkiDPrast

Reputation: 1725

Agree with @j08691. Working with html layout and css, it's always helpful, for me at least, to add following css:

border: 1px solid green; //or any color you like

so that we can see clearly how is the layout.

additional, in case you have issue with src image size, you may use

background-size: cover;

Upvotes: 0

j08691
j08691

Reputation: 207861

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.

Upvotes: 1

Related Questions