background-imageで背景が全部出てこない

プログラミング初心者です
お手柔らかにお願いします

前提・実現したいこと

背景をすべて出したい

発生している問題・エラーメッセージ

class="storephoto"　子要素の部分の高さまでしか背景が出てきません

エラーメッセージ

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6  <title>麺屋しん道</title>
7  <link rel=”icon” type=”image/vnd.microsoft.icon” href=“favicon.ico”>
8 
9 
10
11  <!-- CSS -->
12  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
13  
14  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css">
15  <link rel="stylesheet" href="css/index.css">
16  <script type="text/javascript" src="js/slick2.js"></script>
17  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
18  
19  <!-- すらーだー  -->
20  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
21  
22  </head>
23<body data-spy="scroll" data-target="#menu">
24  <!-- Start Home Section -->
25<div id="home">
26
27  <!-- ヘッダー -->
28  <header>
29    <nav class="navbar navbar-expand-md  navbar-light bg-light fixed-top ">
30      <div class="container-fluid">      
31          <a href="#" class="navbar-brand" style="width:20%;display: inline-block;"><img src="image/logo.jpg" alt="" style="width: 100%;"></a>
32          <button class="navbar-toggler" data-toggle="collapse"  type="button" data-target="#menu">
33            <span class="navbar-toggler-icon"></span>
34          </button>
35          <div class="collapse navbar-collapse" id="menu">
36            <ul class="navbar-nav ml-auto" >
37              <li class="nav-item "><a href="#roots" class="nav-link">「麺屋　しん道」のルーツ</a></li>
38              <li class="nav-item"><a href="#commitment" class="nav-link">こだわり</a></li>
39              <li class="nav-item"><a href="#catalogue" class="nav-link">お品書き</a></li>
40              <li class="nav-item"><a href="#" class="nav-link">お知らせ</a></li>
41              <li class="nav-item"><a href="#store" class="nav-link">店舗情報</a></li>
42            </ul>
43          </div>      
44      </div>
45    </nav>
46  </header>
47
48  <!-- 背景 -->
49  <div class="topimage bg-dark">
50    <div class="swiper-container ">
51    <!-- Additional required wrapper -->
52      <div class="swiper-wrapper " >
53            <!-- Slides -->
54        <div class="swiper-slide text-center"><img src="image/jquery 1.jpg" alt=""></div>
55          <div class="swiper-slide text-center "><img src="image/jquery 2.jpg" alt=""></div>
56          <div class="swiper-slide text-center"><img src="image/jquery 3.jpg" alt=""></div>
57        </div>
58        
59    </div>
60  </div>
61
62
63  <!-- しん道のルーツ -->
64  <div id="roots"  class="toproots">
65    <div class="container-fluid">
66      <div class="row">
67        <div class="roots-text col-12 col-md-6">
68          <h3>麺や　しん道のルーツ</h3>
69          <p>しん道の店主は、昭和町にある「つけそばさんぷく」の常連客の一人でした。その味に魅了され、先代より修行で味を学び、独立いたしました。その時、店主が誓ったのは生涯をかけて「さんぷくの味をさんぷくとともに山梨に残していく」という気持ちでした。先代が作ってくれたつけそばの中には、優しい味と共にお客様に対する愛情もたくさん入っていました。この味を絶やしては二度とこのつけめんには出会えない、その一念が現在のしん道とお客様を結びつけたのだと思っています。 長年さんぷくの味を愛していただいたお客様も、これから食べていただくお客様も、変わらぬご満足をいただき「美味しかったよ」の言葉を頂く為に、スタッフ一同一丸となって今後も伝統ある「さんぷく」の味を継承するとともにさんぷくにも負けない進化した味をお届けします。</p>
70        </div>
71        <div class="roots-image col-12 col-md-6">
72          <img src="image/さんぷく.jpg" style="width: 100%;max-height: 40rem;" alt="">
73        </div>
74      </div>
75    </div>
76  </div>    
77
78
79  <!-- こだわり -->
80  <div id="commitment"  class="topcommitment">
81    <div class="container-fluid">
82      <div class="row">        
83        <div class="commitment-image col-12 col-md-6 order-md-1 order-2">
84          <img src="image/IMG_8618-scaled.jpg" style="width: 100%;max-height: 40rem;" alt="">
85        </div>
86        <div class="commitment-text col-12 col-md-6 order-md-2 order-1">
87          <h3>こだわり</h3>
88          <p>しん道の店主は、昭和町にある「つけそばさんぷく」の常連客の一人でした。その味に魅了され、先代より修行で味を学び、独立いたしました。その時、店主が誓ったのは生涯をかけて「さんぷくの味をさんぷくとともに山梨に残していく」という気持ちでした。先代が作ってくれたつけそばの中には、優しい味と共にお客様に対する愛情もたくさん入っていました。この味を絶やしては二度とこのつけめんには出会えない、その一念が現在のしん道とお客様を結びつけたのだと思っています。 長年さんぷくの味を愛していただいたお客様も、これから食べていただくお客様も、変わらぬご満足をいただき「美味しかったよ」の言葉を頂く為に、スタッフ一同一丸となって今後も伝統ある「さんぷく」の味を継承するとともにさんぷくにも負けない進化した味をお届けします。</p>
89        </div>
90      </div>
91    </div>
92  </div>    
93
94
95  <!-- お品書き -->
96  <div id="catalogue" class="topcatalogue">
97    <div class="container-fluid">
98      <div class="catalogue-text text-center">
99          <h3>お品書き</h3>
100          <p>麺屋しん道は、「つけそばさんぷく」で修行した店主が</p>
101            <p>日本料理の技法を駆使して創った和風ラーメン店です。</p>
102            <p>それまでの常識を大きく変え、多くのラーメン愛好家を驚かせた一杯は</p>
103            <p> グルメサイト「食べログ」にて『ベストラーメン山梨 第１位』に選出されました。</p>
104      </div>
105      <div class="row">
106        <div class="catalogue-one col-md-3">
107          <a href="#" class="text-center">
108            <img src="image/185b5da5-s.jpg" alt="" style="width: 100%;">
109            <h4>つけそば</h4>
110            <p>800円</p>
111          </a>
112        </div>
113        <div class="catalogue-one col-md-3">
114          <a href="#" class="text-center">
115            <img src="image/醤油ラーメン.jpg" alt="" style="width: 100%;">
116            <h4>醤油らぁ麺</h4>
117            <p>700円</p>
118          </a>
119        </div>
120        <div class="catalogue-one col-md-3">
121          <a href="#"  class="text-center">
122            <img src="image/スーラータンメン.jpg" alt="" style="width: 100%;">
123            <h4>スーラータンメン</h4>
124            <p>950円</p>
125          </a>
126        </div>
127        <div class="catalogue-one col-md-3">
128          <a href="#"  class="text-center">
129            <img src="image/汁なし麺.jpg" alt="" style="width: 100%;">
130            <h4>スープ無し辛麺</h4>
131            <p>850円</p>
132          </a>
133        </div>
134     
135
136      </div>
137      
138    </div>
139  </div>  
140
141<!-- 店舗情報 -->
142  <div class="storeinformation" id="store">
143    <div class="storephoto">
144      <div class="infor">
145        <div class="infor-logo " style="background-image: url(image/gourmet-menya_shindou4.jpg);">
146          <a href="#" class="navbar-brand" style="width:20%;display: inline-block;"><img src="image/logo.jpg" alt="" style="width: 100%;"></a>
147        </div>
148        <div class="social">
149
150        </div>
151      </div>
152    </div>
153  </div>
154
155  
156
157  <footer>
158
159  </footer>
160
161  
162
163  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
164  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
165  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
166  
167  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
168  <script>var mySwiper = new Swiper ('.swiper-container', {
169    effect: "fade",
170    loop: true,
171    autoplay: {
172    delay: 4000,
173    disableOnInteraction: false,
174  },
175  speed: 4000,
176  
177    pagination: '.swiper-pagination',
178    nextButton: '.swiper-button-next',
179    prevButton: '.swiper-button-prev',
180    
181  })</script>
182
183</body>
184</html>

CSS
1
2
3.navbar-nav li{
4  padding-right: .7rem;
5}
6
7.navbar-dark .navbar-nav .nav-link {
8  
9  padding-top :.8rem;
10}
11
12/* 背景 */
13
14
15
16
17.topimage-slider {
18  padding:0;
19}
20
21/* お品書き */
22.catalogue-one img{
23  border-radius: 50%;
24}
25
26/* 店舗情報 */
27
28.storephoto {
29height: 20rem;  
30
31}

試したこと

background-imageをつけたclass="storephoto"の親要素にheightで高さ設定しましたが変わりません。
class="storephoto"にz-index:10;をつけても変わりませんでした

hatena19

2020/08/22 07:51 編集

HTML内には複数の画像がありますが、どこのどの画像のことをいってますか。また、どのようなサイズで出したいのですか。

Lhankor_Mhy

2020/08/25 08:23

「class="storephoto"　子要素の部分の高さまでしか背景が出てきません」とのことですが、ご提示のコードでは .storephoto に背景がついていないように見えます。

行動規範の内容に同意します

回答1件

ベストアンサー

補足依頼にご回答いただけなかったので、推測で回答します。

class="storephoto"　子要素の部分の高さまでしか背景が出てきません

背景をつけ間違っているのでは？

html
1    <div class="storephoto">
2      <div class="infor">
3        <div class="infor-logo " style="background-image: url(image/gourmet-menya_shindou4.jpg);">

↓

html
1    <div class="storephoto" style="background-image: url(image/gourmet-menya_shindou4.jpg);">
2      <div class="infor">
3        <div class="infor-logo ">