Как изменить размер фона, наложенного на бэкграунд?

Question

Есть картинка, которая является бэкграундом.

Мне нужно наложить на часть картинки (видно есть отсутп вверху) прозрачный фон, как на следующем фото:

Пишу следующим образом код, но он накладывается полностью на всё фото:

.main-header {
width: 100%;
height: 850px;
background-image: 
linear-gradient(198.73deg, rgba(0, 0, 0, 0.0001) 15.31%, rgba(0, 0, 0, 0.837986) 67.37%),
url(/img/etienne-beauregard-riverin-B0aCvAVSX8E-unsplash.png);
background-repeat: no-repeat;
background-size: contain;
background-color: white;

}

Answer 1

Градиент должен быть расположен на элементе под навбаром, а не в общем родителе (см. картинку)

html, body {
margin: 0;
padding: 0;
min-height: 100vh;
height: 100%;
}

.nav {
  margin: 0;
  padding: 0 30px 0 0;
  display: flex;
  list-style: none;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  height: 50px;
  color: white;
}

#root {
  background: center / cover no-repeat url(https://i.stack.imgur.com/bs8rA.jpg); 
  height: 100%;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1 1 auto;
  background: linear-gradient(198.73deg, rgba(0, 0, 0, 0.0001) 15.31%, rgba(0, 0, 0, 0.837986) 67.37%);
}

<div id="root">
  <ul class="nav">
    <li class="nav__item">nav</li> 
    <li class="nav__item">nav</li> 
    <li class="nav__item">nav</li>
    <li class="nav__item">nav</li>
    <li class="nav__item">nav</li>
  </ul>
  <div class="content"><div> <!-- градиент в этом блоке -->
</div>

БЛОГ НА HUSL

Как изменить размер фона, наложенного на бэкграунд?

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