Помогите с вёрсткой

Question

Всем привет, помогите, пожалуйста с версткой. Не могу разобраться как сделать так, чтобы background начинался от навигационной панели, а не навигационная панель перекрывала часть background'a.

$(document).ready(function() {
  $('.header').height($(window).height());


})

.header {
  background-image: url('https://picsum.photos/1000/700');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.overlay {
  position: fixed;
  min-height: 100%;
  min-width: 100%;
  left: 0;
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="header">
  <div class="overlay"></div>
</header>

Answer 1

Например так

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 20px
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 15px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 15px 0;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  /* фон header черный цвет с прозрачностью 50% */
}

.header__logo {
  white-space: nowrap;
}

.intro {
  height: 100vh;
  background: url(https://picsum.photos/1000/800) no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
}

.header__inner {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.nav__menu {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  margin-left: auto;
}

.nav__item {
  margin: 0px 10px;
}

.nav__item a {
  text-decoration: none;
  color: white;
  border-radius: 10px;
  padding: 0 5px;
  transition: background-color 0.3s ease-in-out;
}

.nav__item a:hover {
  background-color: orange;
}

<header>
  <div class="container">
    <div class="header__inner">
      <div class="header__logo">Панель навигации</div>
      <nav class="nav__menu">
        <div class="nav__item"><a href="#">Привет</a></div>
        <div class="nav__item"><a href="#">Дядя</a></div>
        <div class="nav__item"><a href="#">Вася</a></div>
        <div class="nav__item"><a href="#">Хоп</a></div>
      </nav>
    </div>
    <!-- .header__inner -->
  </div>
  <!-- .container -->
</header>

<div class="intro">

</div>

Или так

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 20px
}

:root {
  --height_header: 53px;
  /*высота header*/
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 15px;
}

header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  padding: 15px 0;
  max-height: var(--height_header);
  color: white;
  background-color: black;
  /* фон header черный цвет с прозрачностью 50% */
}

.header__logo {
  white-space: nowrap;
}

.intro {
  height: calc(100vh - var(--height_header));
  background: url(https://picsum.photos/1000/800) no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
}

.header__inner {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.nav__menu {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  margin-left: auto;
}

.nav__item {
  margin: 0px 10px;
}

.nav__item a {
  text-decoration: none;
  color: white;
  border-radius: 10px;
  padding: 0 5px;
  transition: background-color 0.3s ease-in-out;
}

.nav__item a:hover {
  background-color: orange;
}

<header>
  <div class="container">
    <div class="header__inner">
      <div class="header__logo">Панель навигации</div>
      <nav class="nav__menu">
        <div class="nav__item"><a href="#">Привет</a></div>
        <div class="nav__item"><a href="#">Дядя</a></div>
        <div class="nav__item"><a href="#">Вася</a></div>
        <div class="nav__item"><a href="#">Хоп</a></div>
      </nav>
    </div>
    <!-- .header__inner -->
  </div>
  <!-- .container -->
</header>

<div class="intro">

</div>

БЛОГ НА HUSL

Помогите с вёрсткой

Ответы (1 шт):