1

Задача такова: в макете на главной странице присутствует блок с изображением на весь экран, поверх которого расположены контент и шапка, состоящая только из ссылок и лого (шапка не имеет цвета, только текст).

Происходит следующее: изображение либо становится снизу под шапкой (при отключенном свойстве "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>

2
  • Покажите полный код
    – NDMX
    28 июл 2022 в 0:02
  • @NDMX , добавила
    – maycocaoi
    29 июл 2022 в 17:18

1 ответ 1

0

добавил несколько свойств, посмотрите - должно быть все понятно

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
}


/* HEADER */

.header {
  display: flex;
}

main {
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -1;
}

.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;
  height: 100%;
}

._ibg img {
  position: absolute;
  object-fit: cover;
  top: 0;
  width: 100%;
  height: 100%;
}
<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="https://images.unsplash.com/photo-1659016596573-cb626781048a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1239&q=80" alt="cover">
  </div>
</main>

2
  • Спасибо большое! Всё работает
    – maycocaoi
    30 июл 2022 в 12:57
  • Пожалуйста, был рад помочь))) 30 июл 2022 в 14:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.