[解決済み] ヘッダーに背景画像を追加する方法を教えてください。

質問

こんにちは、どなたかナビゲーションや他の画像の後ろにあるヘッダーの領域に背景画像を追加する方法をご存知ですか？

ありがとうアダム :)

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

私はどこかを台無しにしたと仮定すると、私はそれを解決することができないようです:/。

HTML グリーンエネルギーホームページ http://fonts.googleapis.com/css?family=Signika:400,600'> http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'> マイ・グリーン・エナジー

<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;}

解決方法は？

.headerと書いてありますね。headerの先頭のドットを削除して完了です。

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