表示イメージCSS

私のウェブページの下部に画像を表示する際に問題があります。表示イメージCSS

しかし、それは、画像をロードするために失敗します。

は、これは私が欲しいものです。

これは私のコードです：

index.htmlを

<!DOCTYPE html> 

<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 
     <link rel="stylesheet" type="text/css" href="css/style.scss"> 
     <title>Hello World</title> 
    </head> 
    <body> 
     <header class="header"> 
      Mon App de Météo 
     </header> 
     <section class="view"> 

     </section> 
     <nav class="nav"> 
      <a href="#home"><i class="home"></i></a> 
      <a href="#about"><i class="about"></i></a> 
     </nav> 
    </body> 
</html>

のstyle.css

.header{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 60px; 
    line-height: 60px; 
    color: #FFF; 
    text-transform: uppercase; 
    text-align: center; 
    background-color: #11a7ab; 
} 

.nav{ 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 60px; 
    line-height: 60px; 
    text-align: center; 
    background-color: #4f597b; 
} 

.home{ 
    background-image: url('../img/icon/home.png'); 
    background-repeat: no-repeat; 
} 

.about{ 
    background-image: url('../img/icon/about.png'); 
    background-repeat: no-repeat; 
} 

a{ 
    display: block; 
    width: 50%; 
    float: left; 
}

そして、これは階層です：