Как растянуть backrground image?
Коллеги, добрый день. Появилась проблема, 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: Решил экспортом двух картинок, объединенными в одну
Ответы (1 шт):
Адаптировать для мобильных устройств можно следующим образом:
@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%;
}
}