前提・実現したいこと
タイトルと同じなのですが、CSSでBackground-imageを指定したところ、うまく表示がされません。絶対ファイルパスでやっても、相対ファイルパスでやっても出来ませんでした。独学で学び始めて、少ししかたっておらず簡単なコードなのでしょうが、理由が分かりません。どなたか教えて頂けないでしょうか。
該当のソースコード
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kruh</title> <link rel="stylesheet" type="text/css" href="../css/stylesheet.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> </head> <body> <header> <div class="container"> <div class="header-left"> <!--後でロゴの挿入を行う--> <img class="logo" src="#"> </div> <div class="header-right"> <a href="#">購入</a> <a href="#">新規登録</a> <a href="#">ログイン</a> </div> </div> </header> <div class="top-wrapper"> <div class="container"> <h1>kruhへようこそ</h1> <p>kruhとはドイツ語で"まる"の意味です。手にとっていただいた方がまぁるく、暖かな気持ちになれる作品作りを心がけています。</p> <p>作品は全て手刺繍でひと針ひと針心を込めてお作りしておりますが大きさや形に違いが出てきます。ご了承下さい。</p> <div class="btn-wrapper"> <a href="#" class="btn signup">新規登録はこちら</a> <p>or</p> <a href="#" class="btn google"><span class="fa fa-google"></span>Googleで登録</a> </div> </div> </div> </body> </html>
CSS
* { box-sizing:border-box; } body { margin: 0; } a { text-decoration: none; } .container { max-width: 1170px; width: 100%; padding: 0 15px; margin: 0 auto; } .top-wrapper { padding: 180px 0 100px 0; background-image: url(./Image/top.jpg); background-size: cover; text-align: center; } .top-wrapper h1 { opacity: 0.7; font-size: 45px; letter-spacing: 5px; } .top-wrapper p { opacity: 0.7; } .btn-wrapper { text-align: center; margin: 20px 0; } .btn-wrapper p { margin: 10px 0; } .signup { background-color: #239b76; } .google { background-color: #3b5998; margin-right: 10px; } .btn { padding: 8px 24px; color: white; display: inline-block; opacity: 0.8; border-radius: 4px; text-align: center; } .btn:hover { opacity: 1; } .fa { margin-right: 5px; } header { height: 65px; width: 100%; background-color: rgba(34, 49, 52, 0.9); position :fixed; top: 0; z-index: 10; } .logo { width: 124px; margin-top: 20px; } .header-left { float: left; } .header-right { float: right; margin-right: -25px; } .header-right a { line-height: 65px; padding: 0 25px; color: white; display: block; float: left; transition: all 0.5s; } .header-right a:hover { background-color: rgba(255, 255, 255, 0.3); }
ファイルの位置関係の示し方が良くわからないのでここに自分なりに書かせていただきますが、正しい方法を教えて頂けると幸いです。
/Home→/HTML→/index.html
/Home→/CSS→/stylesheet.css
/Home→/Image
としています。よろしくお願いいたします。
試したこと
幾分学び始めて少しなので、どう改善すればいいのかもわからず、何個かの違う画像を試し、相対ファイルパスと絶対ファイルパスの両方のみ試しました。CSSの書き換えなどは行っていません。
補足情報(FW/ツールのバージョンなど)
sublime textを使っています。
Progateというプログラミングを学べるサイトを使用し、練習しています。
その際に指定された、URLのhttps://prog-8.com/images/html/advanced/top.png のみ、background-imageで指定すると表記されますが、内容を変え自分で少しづつ変えながら応用していこうと思って、自分でurlを指定しようとすると識別されず表示されません。