Как адаптировать изображение имеющее позиционирование absolute

Question

Столкнулся с такой проблемой, я не могу нормально адаптировать изображение находящееся на заднем фоне, вот что у меня получается:

На сколько я понимаю, по макету, изображение должно оставаться статическим даже когда размеры экрана уменьшаются, примерно вот так:

Я понимаю что скорее всего дело в, position: absolute для intro__img, но без этого свойства реализовать эту секцию у меня не получается.

Возможно, есть какие-то другие способы как можно реализовать это изображение так чтобы оно было адаптивным?

Макет figma: http://surl.li/egtixn

  

.container {
  width: 100%;
  max-width: 1230px;
  padding: 0 15px;
  margin: 0 auto;
}

.page {
  overflow: hidden;
}

p,
a,
button {
  color: #43FFD2;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

html,
body {
  overflow-x: hidden;
}


.intro {
  text-align: center;
  font-family: "Cormorant", sans-serif;
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.intro::before {
  content: "";
  position: absolute;
  top: 400px;
  left: 150px;
  width: 400px;
  height: 400px;
  background: #43FFD2;
  border-radius: 50%;
  rotate: 0deg;
  z-index: -2;
  -webkit-filter: blur(100px);
  filter: blur(100px);
}

.intro::after {
  content: "";
  position: absolute;
  top: 300px;
  right: 200px;
  width: 400px;
  height: 400px;
  background: #D978AC;
  border-radius: 50%;
  rotate: 0deg;
  z-index: -2;
  -webkit-filter: blur(100px);
  filter: blur(100px);
}

.intro__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  z-index: -1;
}

.intro__img::after {
  content: "";
  position: absolute;
  bottom: -320px;
  left: 0;
  right: 0;
  height: 30%;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(4, 10, 10, 0)), to(#040A0A));
  background: linear-gradient(180deg, rgba(4, 10, 10, 0) 0%, #040A0A 100%);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/main.css" />
</head>

<body>
  <div class="page">

    <!-- Intro -->
    <section class="intro container">
      <div class="intro__img">
        <img src="assets/img/image_101.png" alt="">
      </div>

      <div class="intro__content">
        <div class="intro__title">
          <div class="intro__title--back">Lover</div>
          <div class="intro__title--front">Flower</div>
        </div>

        <h2 class="intro__suptitle">Создаем для тех, кто ценит свежесть и изящество цветка</h2>
        <a class="intro__btn" href="#">Смотреть каталог</a>
      </div>
    </section>

  </div>
</body>

</html>

БЛОГ НА HUSL

Как адаптировать изображение имеющее позиционирование absolute

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