Background image won't display in header? - html

Question

I am new to css and the image for my header is not displaying. Whenever I try to add it to my header the nav gets a slightly darker tint of red? You and your genius minds figure it out!
css:
header {
background: url("http://www.charlottecentercity.org/wp-content/uploads/2013/09/Imaginon-pic.jpg");
background-size: cover;
image-repeat: no-repeat;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
vertical-align: middle;
line-height: 70px;
display: inline;
}
li {
display: inline;
}
nav {
background: rgba(255,0,0,0.5);
}
nav img {
height: 60px;
margin: 5px;
float: left;
}
html:
<header>
<nav>
<img src="https://dl.dropboxusercontent.com/u/105222237/RGBjpeg.png" />
<ul>
<li>About Imaginon</li>
<li>General Info</li>
<li>Programs and Events</li>
<li>Plan Your Visit</li>
<li>Just for Fun</li>
</ul>
</nav>
</header>

Answer 1

The background image is showing on the header, but:
it is set to background-size: cover, which means that you only see the very top, blue part. Presumably, when you have more content, you'll see more of the header, but in the mean time you could add a min-height: 600px; for example.
the nav has a reddish, semi-transparent background color that sits on top of the header background color. Just remove that red color if you don't want it.

Answer 2

Try and give the header (min/max) width / height

Answer 3

Add css overflow:hidden to your header.. and do the same
in future to all your wrapper elements.

Answer 4

Do give the header a defined size, as it will not be able to fill something that does not have a defined size to it.
header {
margin: 0;
padding: 0;
width: 100%;
height: 100px;
background: url(../wp-content/uploads/2013/09/Imaginon-pic.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If your style sheet is in a subfolder like I usually have, make sure to add ".." to your image location to tell css to step back one directory. Using a direct path will require another http request, not a huge deal but slows your site down in the long run.
I included the webkit background code because I believe it to be easier to use. As well as creating browser compatibility.