CODEWITHSUNDEEP
cssswiper.js
Dave Manuel
Dave Manuel

Reputation: 51

Swiper Slider Responsive background Image

I am using swiper for image slide and each div has a background image but how can I make the background images responsive?

Because when I resize the window the images looks like crop

Thanks.

THIS IS THE THEME WE BOUGHT: https://www.templatemonster.com/demo/61311.html#gref

Upvotes: 2

Views: 15747

Answers (2)

Fillipo Sniper
Fillipo Sniper

Reputation: 439

Maybe you should try this, and to get rid of repeating image or white bg, use 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;
}
}

Upvotes: 2

Sasith
Sasith

Reputation: 790

Add this to your css file.

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

this will make the background image responsive. But I advise you to keep the settings like as it is. Because we can't edit the height of the slider so there is white gap between image and caption.

Upvotes: 2

Related Questions