ЛОР прошу помочь. Впервые сталкиваюсь с такой проблемой. Нужен правильный «true» способ сверстать макет без картинок в фоне.
Должен получиться такой header https://i.imgur.com/EjRC3Fh.png ( https://imgur.com/a/WcjUE )
Проблема в том, что только с картинкой в фоне такое возможно реализовать и то без «резиности». Как это сделать с background-color ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Как такое реализовать?</title>
<style>
body {
background-color:#f4f4f4;
}
header {
background-color:#c1c1c1;
height:550px;
}
.container {
margin: 0 auto;
width:1024px;
max-width:100%;
background-color:transparent;
}
header .layer1 {
}
</style>
</head>
<body>
<header>
<!-- [зеленый div ? или background] -->
<div class="container">
<div class="layer1">
[логотип] [резиновый div c прозрачным фоном]
</div>
</nav>
<!-- [синий div ? или background] -->
</header>
</body>
</html>