0

Имеется макет на FIGMA: https://www.figma.com/file/ZBJipRSv6H5pgkCgPWjogg/Atelier.?node-id=1%3A2.

Верстаю фоновое изображение, которое находится под шапкой. Сайт должен быть адаптивным, соответственно, фоновое изображение - тоже.

Задаю его при помощи background-image, но, для того, чтобы оно прорисовывалось, нужно задать высоту изображению, лицо секции(или блоку), в котором оно находится.

Если я задам 100% высоту секции - появится лишняя высота, что логично.

Как было бы правильно сверстать данную секцию с фоновым изображением?

Спасибо.
CodeOpen: https://codepen.io/Vladislav_Biryukov/pen/JjONjrp

html {
  font-family: 'Old Standard TT', serif;
  font-weight: 400;
}

 :root {
  --orange: #FFAE2B;
  --black: #181511;
  --white: #fff;
  --gray: #ACA592;
}

.container {
  width: 1200px;
  margin: 0 auto;
}

.header {
  height: 80px;
  background-color: var(--black);
}

.nav {
  display: flex;
  align-items: center;
  height: 80px;
}

.logo {
  font-size: 22px;
  color: var(--orange);
}

.span__overview {
  font-size: 11px;
  color: var(--orange);
  margin-left: 42px;
  text-transform: uppercase;
}

.header__ul {
  display: flex;
  margin-left: 28px;
}

.header__ul li a {
  color: var(--gray);
  font-size: 11px;
  margin-right: 40px;
  text-transform: uppercase;
}

.header__button {
  margin-left: auto;
}

.header__button button {
  color: var(--orange);
  background-color: var(--black);
  text-transform: uppercase;
  font-size: 11px;
  border: 1px solid var(--orange);
  padding: 15px 25px 15px 25px;
}

._ibg {
  position: relative;
}

._ibg img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

.section__info {
  background-image: url('https://i.ibb.co/DD1zdx4/img-bg-info.png');
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.info__block {
  text-align: center;
  padding: 120px 120px 200px 120px;
}

.info__block h6 {
  font-size: 12px;
  color: var(--orange);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.info__block h1 {
  margin-top: 15px;
  font-size: 70px;
  color: var(--white);
  line-height: 80px;
  letter-spacing: 1px;
}

.info__block a button {
  color: var(--black);
  background-color: var(--orange);
  padding: 14px 24px 14px 24px;
  font-size: 11px;
  text-transform: uppercase;
  margin-top: 40px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Atelier</title>
  <link href="https://fonts.googleapis.com/css2?family=Old+Standard+TT&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css" type="text/css">
</head>

<body>

  <header class="header" id="header">
    <div class="container">
      <div class="nav">
        <span class="logo">Atelier.</span>
        <span class="span__overview">overview</span>
        <ul class="header__ul">
          <li><a href="#">pages</a></li>
          <li><a href="#">portfolio</a></li>
          <li><a href="#">template</a></li>
          <li><a href="#">contact</a></li>
        </ul>
        <a href="#" class="header__button"><button>buy template</button></a>
      </div>
    </div>
  </header>

  <section id="section__info" class="section__info">
    <div class="container">
      <div class="info__block">
        <h6>WE ARE Atelier Creative Agency</h6>
        <h1>Unique UI Kit Template for<br> Creative Agencies</h1>

        <a href="#"><button>VIEW LAYOUTS</button></a>
      </div>
    </div>
  </section>

</body>

</html>

1 ответ 1

0
.section__info {
  aspect-ratio: 1440 / 602;
}

Соотношение сторон берём с размеров самого изображения. Можно сократить до более маленьких чисел, но не обязательно, да и удобнее видеть сразу размеры.

3
  • Нет, к сожалению, нужно, чтобы .section__info занимало 100% высоты именно изображения, которое наложело в background-image, и при этом, высота была адаптивной, так сказать. 9 фев 2022 в 22:47
  • Отредактировал в третий раз. Решение очень простое. Советую погуглить aspect-ratio и заодно проверить его нa MDN и CanIUse, на всякий случай. Хотя лично я его уже давненько использую и проблем не испытывал. Вот только не сразу осознал, что оно подходит в данной ситуации :) 10 фев 2022 в 11:54
  • Большое спасибо! 10 фев 2022 в 12:10

Ваш ответ

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

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