How do i add a background image to my header?

Question

Hi does anyone know how to add a background image to the area of the header behind the navigation and other images as mine currently seems to stop expanding once it reaches another image within the header tag?

Thanks Adam :)

http://jsfiddle.net/Binnsey/3xaq2mqn/

I'm assuming i messed up somewhere simple but I can't seem to work it out :/

HTML My Green Energy Home Page http://fonts.googleapis.com/css?family=Signika:400,600'> http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'> My Green Energy

<nav>
    <label for="show-menu" class="show-menu">Show Menu</label>
    <input type="checkbox" id="show-menu" role="button">
    <ul id="menu">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">My Metre</a></li>
        <li><a href="#">Customer Help</a></li>
        <li><a href="#">Social Media</a></li>
    </ul>
</nav>
</header>

CSS

body{
    max-width: 1200px;
    margin: 0 auto;
    width: 70%;
    clear: both;
    height: 100%;
    background-color: #DCDCDC;
    padding-top: 30px ; 
    margin: 0 auto;
    padding-top: 30px ; 
    font-family: 'PT Sans', sans-serif;
    font-size: 100%;
    text-align: left;
    line-height: 1.5;
    padding: 2%;
    border-radius: 10px;
    box-shadow: #0AF73A 0px 0px 50px;}

.header {
    width: 100%;
    background-image:url("images/webheader.jpg");
}

.MainHeader {
    background-color: #71B315;
    background: url (images/webheader.jpg);
    /* clearfix */
    overflow: auto;
    margin-top: 2% 0;}

.MainHeader nav {
    background-color: #2f3036;
    height: 60px;
    border-radius: 5px;
    margin-right: 10px;
    margin-left: 10px;
    border-radius: 5px;
    -webkit-border-radius: 5px;}

.content {
    margin-bottom: 2%}

.MainHeader {margin-bottom: 2%;}

.MainHeader img {
    width: 20%; 
    height: auto;}

.MainHeader {
    padding-top: 20px;
    padding-bottom: 10px;}

.headertext {
    display: inline;}

.logo {
    display: inline;
    vertical-align:middle}

#menu .MainHeader nav a:hover, .MainHeader nav a:active
#menu .MainHeader nav .active a:link, .Mainheader nav .active a:visited {
    background-color: ;
    text-shadow: none;}

.MainHeader nav ul li a {
    border-radius: 5px;
    -webkit-border-radius: 5px;}

Answer 1

You wrote .header. Remove the Dot in the beginning of header and your done. so it would look the this:

header {
     width:100%;
     background-image:url("images/webheader.jpg");
}

Answer 2

You are having an extra space in your value, thus making it invalid.

.MainHeader {
    background: url (images/webheader.jpg);
}

should be

.MainHeader {
    background: url(images/webheader.jpg);
}

See jsfiddle