Background-image и респонсив-вёрстка

Question

Есть макет (https://www.figma.com/design/v3CYjno3KdI1XdKkhe7okC/Web-Studio-(Version-2.1)-(Copy)?node-id=3-7653&node-type=canvas&t=GIj8ZFvJBqvxqICs-0). Проблема с фоновым изображением баннера (герой). При мобильной версии нужно ширина на 100% вьюпорта, а высота 400px, но при данных стилях изображение влазит не полностью, если же задать contain, то фоновое изображение просто по центру 400px становится и не растягивается.

.hero {
    padding-top: 118px;
    padding-bottom: 118px;

    min-height: 400px;
    background-image: linear-gradient(to right, rgba(47, 48, 58, 0.4), rgba(47, 48, 58, 0.4)), url("../images/hero/bg-img.jpg");
    background-image: url("../images/hero/bg-img.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

<section class="hero">
        <h1 class="hero__title">Ефективні рішення для<br />вашого бізнесу</h1>
        <button type="button" class="button hero__button" data-modal-open>
          Замовити послугу
        </button>
      </section>

Answer 1

Попробуйте так:

.hero {
  background-image: linear-gradient(to right, #2F303A66, #2F303A66), url(https://s3-alpha-sig.figma.com/img/1131/4362/dd953143a8a4d9f86ec8d71afc0e8103?Expires=1728864000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=I6FHDT8LO0wqJ5oFq4YmFGOEFKbqVZt3owzspvcVQKS54a2w6O5z5pMUehZhSvS~V5-8HAe3GqC~bcHGkPvWRLlmZCPjR7i~NWeYQb0LiIwM2Mwz1ITJ5wre8Yc~ZGQItOw8fk5iv1DuFJEN~zuseQq3f5i9aP0liBZ884AuPkwQeag8-tAA8G3877cULRNGx23J6lAP6Zj1Ejw8Op1AlrI4p1uOAR3r-fDkhqpoc0paY2lbpEQUvj9K096EefCXL-OQpM4ob144lqbeI9ZPIykiuDLs9MIHhLKakMg-OyLFPaCTYSSwe2HwYv89yc4knpuhsMOc0PS5wQrsKYrB1A__);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: clamp(400px, calc(100vw * 600 / 1600), 600px);
  max-width: 1600px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #ffffff;
}

<section class="hero">
  <h1 class="hero__title">Ефективні рішення для<br />вашого бізнесу</h1>
  <button type="button" class="button hero__button" data-modal-open>
        Замовити послугу
    </button>
</section>

БЛОГ НА HUSL

Background-image и респонсив-вёрстка

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