PeterPrakker PeterPrakker - 5 months ago 7
HTML Question

Why won't my background image show?

Any relevant information:
Im trying to make a portfolio website, but I've come across a weird problem. I wanted to use an image as header, but for some reason it just won't show.

After searching the web for a while, I asked my teacher if he could take a look at it and find out what I did wrong, but he's a typical old guy who still has to search for every button on the keyboard even though he has a great deal of experience with HTML and CSS. The first thing I did was putting the image inside the HTML using img src, which worked, however I was unable to change it's position. But since my teacher recommended me to display the image using CSS, I can't even manage to actually display it..

My question (short): What's the reason my header image won't show?
(any advice for the future will be appreciated!)




Below you'll see my current syntax.
I wanted to add a fsfiddle link, but since everything refers to images I have on my computer, I thought it would be easier to upload my entire folder instead.
HERE is the link to that




html

<head>
<title>index</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"></div><!-- end header -->

<div id="menu">
<ul>
<li><a href="index.php"><img border="0" id="homebutton" alt="" src="img/home button.png" width="145px" height="auto"></a></li>
<li><a href="about.php"><img border="0" id="aboutbutton" alt="" src="img/about button.png" width="145px" height="auto"></a></li>
<li><a href="gallery.php"><img border="0" id="gallerybutton" alt="" src="img/gallery button.png" width="145px" height="auto"></a></li>
<li><a href="contact.php"><img border="0" id="contactbutton" alt="" src="img/contact button.png" width="145px" height="auto"></a></li>
</ul>
</div><!-- end menu -->

<div id="content"></div><!-- einde content -->
</div><!-- end container -->
</body>


css

#container {
margin: 0px auto;
padding: 10px;
width: 1300px;
}

#header {
background-image: url("img/header.png");
background-repeat: no-repeat;
width: 1300px;
height: auto;
max-height: 275px;
}

#menu ul {
margin: 0;
padding: 0;
list-style:none;
}

#menu ul li {
float: left;
}

Answer

You actual height is 0px, so you can't see it. You need to write a size too, like height: 10px; or min-height: 10px.