Задача такова: в макете на главной странице присутствует блок с изображением на весь экран, поверх которого расположены контент и шапка, состоящая только из ссылок и лого (шапка не имеет цвета, только текст).
Происходит следующее: изображение либо становится снизу под шапкой (при отключенном свойстве "object-fit"), либо исчезает, когда свойство "object-fit" применено. Нужно сделать так, чтобы изображение находилось позади шапки, начиная с верха страницы. Изображение необходимо сделать именно в виде html элемента, а не css свойства background.
Пробовала применять "position: absolute" к шапке и её элементам, из этого тоже ничего не вышло (применение к шапке - изображение как надо, а шапки нет; к её элементам - шапка была выше изображения и с косым текстом)
Буду очень благодарна за помощь!
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
}
/* HEADER */
.header {
height: 104px;
display: flex;
}
.container {
width: 1046px;
margin: 0 auto;
padding-top: 36px;
padding-bottom: 36px;
}
.header__logo {
font-weight: 700;
font-size: 24px;
display: inline-block;
margin: 0 12% 0 0;
}
.header-nav {
list-style-type: none;
display: inline-block;
}
.header-nav li {
display: inline-block;
margin-right: 21px;
}
.header-nav__link {
text-decoration: none;
color: #737373;
font-weight: 700;
font-size: 14px;
}
/* MAIN */
._ibg {
position: relative;
}
._ibg img {
position: absolute;
object-fit: cover;
top: 0;
width: 100%;
height: 100%;
}
<body>
<header class="header">
<div class="container">
<div class="header__logo">
<p>Relvise</p>
</div>
<ul class="header-nav">
<li><a href="#" class="header-nav__link">Home</a></li>
<li><a href="#" class="header-nav__link">Product</a></li>
<li><a href="#" class="header-nav__link">Prising</a></li>
<li><a href="#" class="header-nav__link">Contact</a></li>
</ul>
</div>
</header>
<main>
<div class="main-background _ibg">
<img src="/img/cover.png" alt="cover" >
</div>
</main>
</body>