Div with background image not displayed / height ignored - html

Question

I am trying to build a header similar to this one: http://themes.tf/preview/?momentum
I've set a height but the div still won't get displayed and the content slips to the top.
How can I fix this?
The css is:
.header {
position:relative;
display:block;
width:100%;
z-index:1;
height:688px;
}
.bg-img {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
This is the html:
<div class="header bg-img" style="background-image: url('img/xlheader_s.jpg');">
<img src="img/schwager-baubetruung_logo.png" id="logo" alt="schwager baubetreuung logo">
<nav>
<ul>
<li class="current">Startseite</li>
<li>Über uns</li>
<li>Unsere Arbeit</li>
<li>Galerie</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</nav>
</div>
Here you can see the live version: http://suitsncats.de/index_copy.html
If you go to the index page you can see my previous attempt that worked but had a static header image.

Answer 1

I've looked into the source on your website and encountered two issues:
You've used an id selector (#header) instead of class selector (.header) in your style_copy.css and there's also a syntax error in it (no ; after the height declaration)
#header {
position:relative;
top:0px;
left:0;
height:668px
z-index:1;
}
/* should become: */
.header {
position:relative;
top:0px;
left:0;
height:668px; /* <--- note ; */
z-index:1;
}

Answer 2

In your live version, I've checked out your CSS file style_copy.css and noticed that you tell the CSS to look for #header even though in the HTML you're using .header.
You also forget the ; after the height declaration.
Solution:
Change this in the live version's CSS:
#header {
position:relative;
top:0px;
left:0;
height:668px;
z-index:1;
}
To this:
.header {
position:relative;
top:0px;
left:0;
height:668px;
z-index:1;
}
Hope this helps!

Answer 3

Hi I looked into your source at live website, try following solution:
<div class="header bg-img" style="background-image: url('img/xlheader_s.jpg');">
<img src="img/schwager-baubetruung_logo.png" id="logo" alt="schwager baubetreuung logo">
<nav>
<ul>
<li class="current">Startseite</li>
<li>Über uns</li>
<li>Unsere Arbeit</li>
<li>Galerie</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</nav>
</div>
and CSS:
.header {
position: static;
height: 100px;
width: 100%;
background-color: red;
}
nav {
width: 50%;
height: 30px;
margin: auto;
display: table;
z-index: 2;
text-transform: uppercase;
}
Not exactly how you wanted, but one step closer.