Не могу сделать фон после headera.Как то получилось сделать фон цветом,но картинкой не получается вообще.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Graze</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<div class="container">
<img src="img/logo.png" alt="logo" class="logo">
<div class="menu">
<nav>
<ul class="menu">
<li>
<a href="#">subscribe</a>
</li>
<li>
<a href="#">shop</a>
</li>
<li>
<a href="#">about</a>
</li>
<li>
<a href="#">help</a>
</li>
<li>
<a href="#">rewards</a>
</li>
<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;
}
Простой
