CSSの背景が表示されません。

前提・実現したいこと

HTML,CSSの勉強中でホームページの作成をしています。
CSSで背景を挿入しようとしているのですが、上手くいきません。

HTMLのコード

<!DOCTYPE html><!--!DOCTYPE 宣言-->
<html lang="ja"><!--日本語の文章である事を表現-->
   <head><!--head部分　HTMLページの情報が入る-->
      <meta charset="utf-8"><!--文字コードの指定-->
      <title>Sunny Side Island</title><!--タイトル-->
      <meta name="description" content="　元無人島　が提供する最高の遊びと癒し。">
      <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
      <!--ress.cssの指定-->
      <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
      <!--googleフォントの指定-->
      <link href ="css/style.css" rel ="stylesheet">
      <!--これから指定するCSS　relはファイルとの関係性　hrefファイルのURL-->
            </head>

        <body>  <!--表示するホームページの中身-->
          <div id="home" class="big-bg">
          <header class ="page-header wrapper"> <!--ヘッダーの作成HPの上部のメニューなどを表示-->
            <h1><a href="index.html"><img class="logo" src="images/sunnyside logo.jpeg" alt="SunnySide ホーム"></a></h1>
             <!--ロゴの配置、クリックしたらトップページになるように、リンクの指定、srcで画像の貼り付け、altで画像が表示されなかった時の処理を書く-->
            <nav> <!--ナビゲーションタグの配置-->
              <ul class="main-nav"> <!--ヘッダーの設定　リストの作成　liは項目-->
                <li><a href="sightseeing-spot.html">観光</a></li>
                <li><a href="member.html">スタッフ紹介</a></li>
                <li><a href="inquiry.html">お問い合わせ</a></li>
              </ul>
            </nav>
          </header>

          <div class="home-content wrapper">
            <h2 class="page-title">SunnySide Island</h2>
            <p>日常を忘れて、自然と遊びが調和する”元無人島”に遊びに来ませんか？</p>
            <br></br>
             <a class="button" href="sightseeing-spot.html">おすすめスポットを見る</a>
　　　　　　</div>
          </div>
        </body>

###CSS

@charaset "UTF-8";  /*文字化防止*/
html {
  font-size: 100%  /*文字サイズの設定*/
}
body{
  font-family: "Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ　Pro　W3",sans-serif;
  /*書体の指定*/
  line-height: 1.7; /*行の高さの指定*/
  color: #432;　　　/*色の指定*/
}
a{
  text-decoration: none; /*aタグの傍線の指定 線は引かない*/
}
img{
  max-width:  15%; /*画像の大きさの指定*/
}
.logo{
  width:  210%;/*幅の指定*/
  margin-top: 14px;/*要素の外側の余白　topの上側だけ指定*/
}
.main-nav{
  display: flex; /*横並び　要素の並びのカスタマイズを下記に示している*/
  font-size: 1.25rem;/*文字の大きさ*/
  text-transform: uppercase;/*文字の大文字か小文字の指定*/
  margin-top: 34px;
  list-style: none;/*リストの先頭に置くマーカーの設置　今回は無し*/
  white-space: nowrap;　/*文字を横書きにする*/
}
.main-nav li{
  margin-left:  36px;
}
.main-nav a{
  color: #432;
}
.main-nav a:hover{
  color: #0bd; /*a:hoverリンクテキストにカーソルを合わせたときの装飾を指定　合わせた文字色を指定*/
}
.page-header{
  display: flex;
  justify-content: space-between; /*大きい括りでロゴとヘッダーを横並びにする
  　　　　　　　　　　　　　　　　　　　 各アイテムを均等に配置し
                                   最初のアイテムは先頭に寄せ、
                                   最後のアイテムは末尾に寄せる */
}
.wrapper{
  max-width:  1100px; /*横幅の指定*/
  margin: auto;　/*画面の中央に配置*/
  padding: 0 4%;　/*スマートフォン向けの余白の指定*/
}

.home-content{
  text-align: center; /*画面中央と余白の指定*/
  margin-top: 10px;
}
.home-content p {
  font-size: 1.125rem;　/*pタグへのフォントサイズと余白の指定*/
  padding-bottom: 40px;
}
.page-title{
  font-size: 5rem;
  font-family: 'Philosopher',serif;
  text-transform: uppercase; /*全部大文字*/
  font-weight: normal;/*文字の太さ標準*/
}
.button{/*ボタンのクラスに余白や角丸色の指定*/
  font-size: 1.375rem;
  background: #0bd;
  color: #fff;
  border-radius: 5px;
  padding: 18px 32px;
  margin-left: 80px;
}
.button:hover{
  background: #0090aa;
}
.big-bg{
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
#home{
  background-image: url(../images/logo.jpeg);
  min-height: 100vh;
}
#home .pagetitle{
  text-transform: none;
}

試したこと

パスを絶対パスに変更。
ディレクトリも色々なパスを試しました。

補足情報（FW/ツールのバージョンなど）

imagesのあるフォルダはCSSフォルダ、HTMLファイルと並んで格納されています。
写真のファイル名はlogo.jpegです。

hope_mucci

2020/05/30 15:28

cssのコードもhtmlのコードと同じように<code>ボタンでくくってください。読みやすくなります。

kgsu

2020/05/30 15:39

コードで括りました！ご指摘ありがとうございます。

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

回答4件

ベストアンサー

ええと、張り付けられたHTMLとCSSがそのまま編集中のファイルと同一だと仮定すると、日本語を書いてはいけない場所に何か所か全角空白が混入しているのが原因ではないでしょうか。

ちなみに、今回のURLだと、url()内は'や"で囲まなくても行けますし、CSS文書からの相対パスで書くので「../images/logo.jpeg」という指定で合っています。

投稿2020/05/30 16:02

Daregada

総合スコア11990

kgsu

2020/05/30 16:42

回答ありがとうございます。確かにいくつか全角でスペースを開けてコメントアウトしていたりしたので修正いたしました。まだミオといている部分があるのか、それでも反映がされません、、、

Daregada

2020/05/30 16:47

お使いになられているアプリの検索機能を使って、全角空白を検索するか、いっそのこと半角空白に置換してしまえばいいのでは。なお、提示されたCSSの全角空白をすべて取り除いたところ、こちらの環境では背景画像が表示されました。

kgsu

2020/05/30 17:04

ATOMの全角入力が可視化できるようになるものをインストールして確認し修正しましたがまだ出現されません。まだ全角スペースを見落としているのかもしれません。また明日確認してみます。ありがとうございます。

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

※内容を勘違いしていました。修正します。

ディレクトリ構成はどうなっているんですか？

そのhtml
css/
    └そのcss
images/
    └ logo.jpeg

となっているなら、background-image: url(../images/logo.jpeg);で良いはずですが、ディレクトリ構成やファイル名を一度見直してみてください。また画像ファイルが壊れていないかも確認してみてください。
あと、URLの文字列は念のためシングルクォートで括ったほうが良いです。
html内で出てくる画像のようにファイル名にスペースが入っているなら、クォートしないとエラーになるはずです。

投稿2020/05/30 15:43

編集2020/05/30 16:12

hope_mucci

総合スコア4447