Делаю шапку для сайта. Столкнулся с проблемой: я хочу чтобы все содержимое сайта хранилось в рамках одного общего контейнера (wrapper) который размещен по по центру экрана. Но на сайте нужно сделать такие фото, которые длиной во всю ширину экрана. Получается так что этот wrapper перекрывает фото, и просто обрезает его до своего размера.
body{
width: 100%;
margin: 0;
background: url("images/head-bg.jpg");
}
header{
background-size: 100% 1024px;
width: 100%;
height: 1024px;
}
.wrapper{
width: 1230px;
margin: 0 auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Waxom</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<header>
</header>
</div>
</body>
</html>