0

Коллеги, добрый день. Появилась проблема, 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: Решил экспортом двух картинок, объединенными в одну

5
  • Попробуй указать сайз в процентах
    – Maneken
    Commented 8 мая 2023 в 20:47
  • height: 100% не увенчался успехами Commented 8 мая 2023 в 21:00
  • Background-size: 100% 100%;
    – Maneken
    Commented 8 мая 2023 в 21:29
  • Но тогда картинка будет узкой на мобильных устройствах, а мне нужно чтоб она растягивалась, тоесть была cover Commented 9 мая 2023 в 10:43
  • Для начала не стоит такие картинки грузить через css - это же динамические элементы. Вдруг заменить придётся изображение, что в css лезть будете? А если вы уже проект отдадите заказчику и он захочет каждую неделю менять изображение, он будет к вам обращаться, что бы вы поправили css? Commented 10 мая 2023 в 5:37

1 ответ 1

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%;
}

}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.