Bootstrapを使ったbackground-imageのレスポンシブデザインについて

HTMLテンプレートを基にBootstrapを使ってウェブサイトを作っています。
3枚の画像が順番にスライドで流れるテンプレートを使っています。
しかし、1枚目の画像だけ、レスポンシブ対応になりません。他の2枚はレスポンシブ対応をします。
HTMLのコードしか触っていないのですが、なぜでしょうか？
どうぞ、よろしくお願い致します。

HTML5
1 <!--Home Section Start-->
2      <section id="home" class="slider-area" data-stellar-background-ratio=".7" data-scroll-index="0">
3
4        <div id="owl-demo" class="owl-carousel owl-theme">
5         
6          <div class="sl-item img-fluid" style="background-image: url('assets/images/banner/running.jpg')" >
7            <div class="container">
8                <!--Banner Content-->
9                <div class="banner-div">
10                    <h1>＠＠＠＠＠＠<span>Website</span>＠＠＠＠</h1>
11                    <p class="cd-headline clip is-full-width">
12                        <span class="cd-words-wrapper">
13                            <b class="is-visible">Thanks for coming!!</b>
14                        </span>
15                    </p>
16                    <a href="contact-form" class="btn btn-light btn-lg">お問い合わせはコチラ</a>       
17                </div>
18            </div>
19          </div>
20          <div class="sl-item" style="background-image: url('assets/images/banner/cooking.jpg')" >
21            <div class="container">
22                <!--Banner Content-->
23                <div class="banner-div banner-div-center">
24                    <h1>＠＠＠＠＠<span>Website</span>＠＠＠＠</h1>
25                    <p class="cd-headline clip is-full-width">
26                        <span class="cd-words-wrapper">
27                                <b class="is-visible">Thanks for coming!!</b>
28                        </span>
29                    </p>
30                    <a href="contact-form" class="btn btn-light btn-lg">お問い合わせはコチラ</a>
31
32                   
33                </div>
34            </div>
35          </div>
36          <div class="sl-item" style="background-image: url('assets/images/banner/trip.jpg')" >
37            <div class="container">
38                <!--Banner Content-->
39                <div class="banner-div banner-div-right">
40                    <h1>＠＠＠＠<span>Website</span>＠＠＠</h1>
41                    <p class="cd-headline clip is-full-width">
42                        <span class="cd-words-wrapper">
43                                <b class="is-visible">Thanks for coming!!</b>
44
45                        </span>
46                    </p>
47                    <a href="contact-form" class="btn btn-light btn-lg">お問い合わせはコチラ</a>
48
49                
50                </div>
51            </div>
52          </div>
53        </div>
54    </section>
55    <!--Home Section End-->

CSS3
1section#home {
2      width:  100%;
3      height: 100vh;
4      }
5
6      .sl-item {
7      width:  100%;
8      height: 100vh;
9      background-size:  cover;
10      }
11    
12
13      .sl-item:after {
14      content: " ";
15      position: absolute;
16      top: 0;
17      bottom: 0;
18      left: 0;
19      right: 0;
20      background:rgba(0, 0, 0, 0.75);
21      z-index: 0;
22      opacity: .6;
23      }