Как убрать пустые места фона

Question

Столкнулась с проблемой адаптации заднего фона под сайт. При изменении ширины экрана появляются пустые места под картинкой, из-за которых я не могу добавить другие блоки сайта. Пробовала по разному, но ничего не меняется. Заказчик просит, чтобы задний фон пропорционально уменьшался в размерах, поэтому cover предлагать не нужно, contain делает то, что надо.

Стандартный вид (все выглядит круто):

Так это выглядит на телефоне(огромное пустое место под картинкой):

.firstblock_background {
    border: solid #000;
    max-width: 100%;        
    height: 810px;
    margin: 0px auto;
    z-index: 4;
    background: url(../source/block/background.png) center top/contain no-repeat;
}

&__woman{
        position: absolute; 
        right: 3%;
        overflow: hidden;
        width:  32%;
        float: right;   

    }
    &__womanimg{
        max-width: 100%;
    }

<section>
        <div class="firstblock_background">
            1
            <div class="container">
                <div class="section">
                    <div class="section__menu">         
                        <ul class="section__ul">
                            <li >Главная</li>
                            <li id="imgline"> Содержание курса </li>
                            <li id="imgline"> Формат обучения </li>
                            <li id="imgline"> Купить курс </li>
                            <li id="imgline"> Контакты </li>
                        </ul>
                    </div>
                    <div class="section__text">
                        <p>Ваш учитель</p>
                        <p>начальных классов!</p>
                    </div>
                    <div class="section__text2">
                        <p>УЧУ КАК НАДО!</p>
                    </div>
                    <div class="section__woman">
                        <img src="source/block/woman.png" alt="" class="section__womanimg">
                    </div>
                </div>
            </div>
        </div>
    </section>

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

Answer 1

Супер лайфхак - попробуй объединить фон с девушкой в одну картинку при помощи Photoshop например ? Всё равно девушка как фон используется, а не как интерактивный элемент, так что какая разница...

Answer 2

Вариантов решения много, не думаю что это лучший, это первый который в голову пришел. Лучше сделайте минимальное демо

В этом варианте есть проблема с просчетом 100vh, если не нужно чтоб был блок на 100высоты то поставьте другие величины, если нужно - есть фикс для мобильных ФИКС

.hero{
  position: relative;
  width: 100%;
  height: 100vh;
}

.img{
  position: absolute;
  bottom: 0;
  right: 0;
  top: 0;
}

.img01{
  left: 0;
  background: url(https://placeimg.com/640/480/nature) no-repeat;
  background-size: cover;
}

.img02{
top: unset;
  right: 0;
  width: 40vw;
  height: 50vh;
  background: url(https://placeimg.com/640/480/tech) no-repeat;
  background-size: cover;
}

<div class="hero">
<div class="img img01"></div>
<div class="img img02"></div>
</div>

Answer 3

Спасибо всем! Я поставила значение height не в px, а в vw и высота моего блока теперь равна фону. Все круто

БЛОГ НА HUSL

Как убрать пустые места фона

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