スワイパースライダーレスポンス背景画像

Question

画像スライドにswiperを使用していますが、各ディビジョンに背景画像がありますが、どのように背景画像を反応させることができますか？

私はウィンドウのサイズを変更すると、画像が作物のように見えるので

感謝。 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; 
} 
}