背景画像が表示されない

**背景画像の指定

ホームページを作成しています。（スラスラわかるhtml&cssのきほん）
本の通りにcssのコードを入力しましたが、この一つだけ背景画像が表示されません。

画像の名前・保存場所は合っています。

どうすれば背景画像が表示されるでしょうか。**

css
1@charset "UTF-8";
2
3/* すべてのWebページに適用される */
4html {
5   font-family: sans-serif;
6}
7html * {
8   box-sizing: border-box;
9}
10body {
11   margin: 0 0 0 0;
12   background-color: #eeece9;
13}
14.wrapper {
15   margin: 0 auto 0 auto;
16   max-width: 960px;
17}
18h2{
19   color: #3f5170;
20   font-size: 22px;
21   border-bottom: 3px dotted #3f5170;
22   margin-top: 20px;
23   margin-right: 0px;
24   margin-bottom: 20px;
25   margin-left: 0px;
26   padding-top: 5px;
27   padding-right: 5px;
28   padding-bottom: 5px;
29   padding-left: 5px;
30}
31p {
32   line-height: 1.6;
33}
34a:link{
35   color: #d25833;
36}
37a:visited{
38   color: #d25833;
39}
40a:hover{
41   color: #e3937a;
42}
43a:active{
44   color: #ff6a3b;
45}
46img {
47   max-width: 100%;
48   height: auto;
49}
50
51/* すべてのページに適用 - ヘッダー - */
52.logo {
53   margin: 50px 0 40px 0;
54   line-height: 0;
55   text-align: center;
56}
57.nav li {
58   display: inline;
59   list-style-type: none;
60   padding-right: 30px;
61}
62.nav ul {
63   margin: 0 0 0 0;
64   padding: 20px 10px 15px 20px;
65   background-image: url(../images/menu-bg.png);
66   background-repeat: repeat-x;
67}
68.nav a:link {
69   color: #3c454d;
70   text-decoration: none;
71}
72.nav a:visited {
73   color: #3c454d;
74   text-decoration: none;
75}
76.nav a:hover {
77   color: #7b8dac;
78   text-decoration: none;
79}
80.nav a:active {
81   color: #5a9bc0;
82   text-decoration: none;
83}
84
85/* すべてのページに適用 - フッター - */
86.footer {
87   background-image: url(../images/footer-bg.png);
88   background-repeat: no-repeat;
89   margin-top: 30px;
90   padding: 80px 15px 20px 15px;
91   font-size: 12px;
92   color: #3f5170;
93}
94
95/* 個別のスタイル */
96/* index.html */
97.keyvisual {
98   margin: 15px 0 0 0;
99}
100.news-item {
101   margin: 0;
102}
103
104/* about.html */
105.shop-photo {
106   float: left;
107   padding: 0 1em 1em 0;
108}
109.clear {
110   clear: both;
111}
112/* テーブル */
113.info {
114   border-collapse: collapse;
115}
116.info th, .info td {
117   padding: 8px;
118   border: 1px solid #bec2c7;
119   text-align: left;
120}
121.info th {
122   background-color: #dde2ea;
123   width: 90px;
124   color: #3f5170;
125   vertical-align: top;
126}
127
128/* menu.htmi */
129.menu-item {
130   display: flex;
131   border-bottom: 1px dashed #bec2c7;
132   padding: 20px 8px;
133}
134.menu-photo {
135   margin-right: 16px;
136   flex: 1 1 auto;
137}
138.menu-text {
139   flex: 0 0 336px;
140}
141
142/* access.html */
143.map {
144   text-align: center;
145}
146
147/* contact.html */
148form div {
149   padding: 12px;
150   border-bottom: 1px dashed #bec2c7;
151}
152select {
153   width: 30em;
154}
155input[name="subject"] {
156   width: 30em;
157}
158textarea {
159   width: 30em;
160   height: 6em;
161}
162input[type="submit"] {
163   margin: 20px 0;
164   width: 30em;
165}
166
167/* スマートフォン向けCSS */
168@media (max-width: 767px) {
169   /* 全体 - ナビゲーション */
170   .wrapper {
171      margin: 0 8px;
172   }
173   .logo {
174      margin: 30px 0;
175   }
176   .logo img {
177      width: 200px;
178   }
179   .nav {
180      background-color: #dfddda;
181   }
182   .nav li {
183      display: block;
184   }
185
186/* menu.html - 横並び解除 */
187   .menu-item {
188      display: block;
189   }
190   .menu-photo {
191      margin-right: 0;
192      width: 100%
193   }
194   .menu-text {
195      width: 100%;
196   }
197
198/* about.html - 画像のパディングを調整 */
199   .shop-photo {
200      padding-right: 0;
201   }
202
203   /* contact.html - フォーム */
204   select {
205      width: 100%;
206   }
207   input[name="subject"] {
208      width: 100%;
209   }
210   textarea {
211      width: 100%;
212   }
213   input[type="submit"] {
214      margin: 20px 0;
215      width: 100%;
216   }   
217}
218

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" contaent="width=device-width, initial-scale=1">
6<title>KUJIRA Cafeへようこそ</title>
7<link rel="stylesheet" href="css/style.css">
8</head>
9<body>
10<div class="wrapper">
11   <!-- ヘッダー -->
12   <header class="header">
13      <h1 class="logo"><a href="index.html"><img src="images/logo.png" alt="KUJIRA Cafe"></a></h1>
14      <nav class="nav">
15         <ui>
16            <li><a href="index.html">ホーム</a></li>
17            <li><a href="about.html">店舗案内</a></li>
18            <li><a href="access.html">アクセス</a></li>
19            <li><a href="menu.html">メニュー</a></li>
20            <li><a href="contact.html">お問い合わせ</a></li>
21         </ui>
22      </nav>
23   </header>
24   <!-- ヘッダー ここまで -->
25   <!-- メイン -->
26   <div class="keyvisual">
27      <img src="images/keyvisual.jpg" alt=""> 
28   </div>
29   <main>
30         <h2 id="news">News</h2>
31         <p class="news-item">4月29日（土）は、九寺楽町の春祭りに出店するため、お店は休業させていたただきます。春祭りでタルトやキッシュ、コーヒーも販売するので、ぜひお越しください。</p>
32         <p class="news-item">3月20日（月・祝）は、18時からアコースティックギターデュオ「<a href="http://www.sbcr.jp" target="_blank">PICNIC</a>」のライブを開催します。投げ銭方式です。お楽しみに！</p>
33   </main>
34   <!-- メイン ここまで -->
35   <!-- フッター -->
36   <footer class="footer">
37      <p>&copy;Copyright KUJIRA Cafe. All rights reserved.</p>
38   </footer>
39   <!-- フッター ここまで -->
40</div>
41</body>
42</html>

m.ts10806

2019/04/26 05:39

コードはマークダウンの機能を利用してご提示ください。 https://teratail.com/help#about-markdown

yoshinavi

2019/04/27 01:02 編集

CSSのセレクタ名が間違っている可能性があります。 CSSはHTMLとセットです。HTMLも提示してください。 -編集しました-

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

回答3件

CSS記述のどこかに全角スペースなど混じってないか
スーパーリロード
ファイル名を手打ちではなくコピペ
CSSから見たパスかどうか確認
ファイルが壊れてないか

投稿2019/04/26 05:42

m.ts10806

総合スコア80850

risacuspin

2019/04/27 04:24

回答ありがとうございます！全角スペースが混じっていたので修正しましたが背景画像は反映されませんでした。

m.ts10806

2019/04/27 05:34

解決されたようですが、後付けが多すぎると的確な回答にはなりません。はじめに持っている情報はなるべく全て提示するようにしてください

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

HTMLファイルとPNGファイルの相対位置関係が正しくないのでは？
とりあえず同じフォルダにおいて

CSS
1background-image: url(smenu-bg.png);

として動作するか確認してみてください

投稿2019/04/26 05:45

yambejp

総合スコア114777

risacuspin

2019/04/27 04:22

回答ありがとうございます！試してみましたが、動作しませんでした。

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

ベストアンサー

HTMLの要素がご記述では？
<ul>　と　<ui>

投稿2019/04/27 04:25

yoshinavi

総合スコア3523

risacuspin

2019/04/27 04:27

ありがとうございます！！解決しました。

yoshinavi

2019/04/27 08:31

解決されて何よりです。 (^^)

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

背景画像が表示されない

関連した質問