Как сделать так чтобы bg-image покрывал всю страницу, включая header?

Question

В общем. У меня есть header, и там должен быть прозрачный фон, чтобы я смог в body вставить картинку

Сейчас у меня фон вписан в header, но если сделаю наоборот то получаю вот что: Как это фиксить? Пробовал вписывать min-height: 100vh;background-size: cover; - Ничего

Это уже весь код body. Извините за тупость, я тут впервые и толком даже еще не до конца сервисом пользоваться умею.

ремарка. Весь фон должен зайти на header когда я вписываю его в body

Это весь код header

Answer 1

если шапка фксированая

header {
  position: fixed;
  width: 100%;
  height: 100px;
  border: 1px solid wheat;
}

main {
  height: 500px;
  background: red;
}

ul {
  display: flex;
}

li {
  list-style: none;
  margin-right: 10px;
}

<body>
  <header>
     <nav>
      <ul>
        <li>Main</li>
        <li>About</li>
      </ul>
      </nav>
  </header>
  <main>
  </main>
</body>

если не фиксированная

header {
  width: 100%;
  height: 100px;
  border: 1px solid wheat;
  position: relative;
  z-index: 1;
}

main {
  height: 500px;
  background: red;
  width: 100%;
  margin-top: -100px;
  position: relative;
  z-index: 0;
}

ul {
  display: flex;
}

li {
  list-style: none;
  margin-right: 10px;
}

<body>
  <header>
     <nav>
      <ul>
        <li>Main</li>
        <li>About</li>
      </ul>
      </nav>
  </header>
  <main>
  </main>
</body>

БЛОГ НА HUSL

Как сделать так чтобы bg-image покрывал всю страницу, включая header?

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