Can't make the background after headera.How to do?

Can't make the background after headera.Somehow make the background color,but the picture does not work at all.
<!DOCTYPE html>
<html lang="en">
the <head>
 <meta charset="UTF-8">
<title>Graze</title>
 <link rel="stylesheet" href="css/main.css">
</head>
the <body>
<header>
 <div class="container">
 <img src="img/logo.png" alt="logo" class="logo">
 <div class="menu">
<nav>
 <ul class="menu">
the <li>
 <a href="#">subscribe</a>
</li>
the <li>
 <a href="#">shop</a>
</li>
the <li>
 <a href="#">about</a>
</li>
the <li>
 <a href="#">help</a>
</li>
the <li>
 <a href="#">rewards</a>
</li>
the <li>
 <a href="#">get started</a>
</li>

</ul>
</nav>

</div>
</header>

<section>
 <div class="container">
 <div class="fon">
</div>
</div>

</section>

<section>
 <div class="container">
</div>
</section>

<section>
 <div class="container">
</div>
</section>
</body>
</html>


body{
 line-height: 1;
 margin:0 auto;
}
header{
 position: relative;top: 10;
}
.container {
width:1200px;

 margin:0 auto;
}
.logo{
 position: relative; top:15px;
}
menu.{
padding:0;
margin:0;
 display: block; 
}

.menu li{
 float: left;
 display: block;
 margin-right: 45px;
 position: relative; top:10px;
}

.menu a{
 color: #000;
text-decoration:none;
 font-size: 28px;
 position:relative; right:20px; top:15px;
font-family:sans-serif;
font-size:20px;
}

.getstarted a{
font-size:22px;
font-family:sans-serif;
 text-decoration: none;
color:#000;
 position:relative; right: -350px; top:10px;
}

.fon{
 height: 100px;
 background-image: url('..img/2466603.jpg') repeat;
 background-size: cover;
 background-position: center;

}
March 20th 20 at 11:25
0 answer

Find more questions by tags CSS