Как растянуть backrground image?

Рейтинг: 0Ответов: 1Опубликовано: 08.05.2023

Коллеги, добрый день. Появилась проблема, background image секции расстягивается не полностью,у одной секции встал как надо, а у другой секции он выходит не во всю ширину. Ниже покажу все на скриншотах. Секция что снизу встала как надо, а секция сверху расстягивает изображение, в чем причина? Код идентичный. введите сюда описание изображения введите сюда описание изображения

.about-us {
background-image: url('../img/about-us.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 100px 0px;
}

.how {
padding: 100px 0px;
background-image: url('../img/how.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

Добавлю, что ширина у обоих картинок одинаковая, но отображаются они по разному

UPD: Решил экспортом двух картинок, объединенными в одну

css html
Источник: Stack Overflow на русском

Ответы

▲ 2

Адаптировать для мобильных устройств можно следующим образом:

@media (max-width: 900px) {

.how {
    background-size: 100% 100%;
}

}

Блок @media создается не вместо, а отдельно от существующего блока, и применяется только когда условие выполнено. В данном случае условие - max-width: 900px . Поэкспериментируете и подберите нужное Вам условие.

Условия можно комбинировать. Вот пример:

@media (max-width: 1000px) and (min-width: 900px) {

.how {
    background-size: 100% 100%;
}

}

Или можно создать условие для экрана:

@media screen (min-width: 900px) {

.how {
    background-size: 100% 100%;
}

}