Swiper Slider Отзывчивый фон Изображение

Question

Я использую swiper для слайда изображения, и каждый div имеет фоновое изображение, но как я могу сделать фоновые изображения отзывчивыми?

Потому что при изменении размера окна изображения выглядит урожай

Спасибо.

ЭТО ТЕМА МЫ КУПИЛ: https://www.templatemonster.com/demo/61311.html#gref

Answer 1

Добавьте это в ваш файл CSS.

@media only screen and (max-width: 991px){ 
    .swiper-slide { 
     background-size: contain !important; 
     background-repeat: no-repeat; 
     background-position: 0 50px !important; 
    } 
} 

это сделает фоновое изображение отзывчивым. Но я советую вам сохранять настройки такими, как есть. Потому что мы не можем редактировать высоту слайдера, чтобы между изображением и надписью был белый промежуток.

Answer 2

Возможно, вам стоит попробовать это, и чтобы избавиться от повторяющегося изображения или белого bg, используйте background-size: cover;

@media only screen and (max-width: 1170px){ 
.swiper-slide { 
    background-size: cover ! important; 
    background-repeat: no-repeat ! important; 
    background-position: 0 0 !important; 
    height: 480px ! important; 
} 
.swiper-container{ 
    height: 600px; 
} 
}