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 that you have read and understand our privacy policy and code of conduct.

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