Q&A
（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
また、各ファイルの場所も提示してください。
初質問です。
かなり知識が乏しく、ネットの質問板に投稿する事自体が初めてな為、
お見苦しい点が多いかと思いますが、よろしくお願い致します。
現在Web開発の教材を用いてサンプルコードを書きながら「html」「css」
の勉強をさせていただいております。
その中でホームページのサンプルを作成しているのですが、
背景として表示されるはずの画像が表示されずに困っています。
以下がHTMLのコードです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>WCBCafe</title> <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ"> <!-- css --> <link rel="stylesheet" href="https://unpkg.com/ress@2.0.1/dist/ress.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Philosopher&display=swap"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="home" class="big-bg"> <header class="page-header wrapper"> <h1><a href="index.html"><img class="logo" src="../images/logo.svg" alt="WCBカフェホーム"></a></h1> <nav> <ul class="main-nav"> <li><a href="news.html">News</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div class="home-content wrapper"> <h2 class="page-title">We'll Make Your Day</h2> <p>おしゃれなカフェで癒されてみませんか？無添加の食材で体の中からリフレッシュ。</p> <a class="buttun" href="menu.html">メニューを見る</a> </div><!--/.home-content--> </div><!--/#home--> </body> </html>
「home」IDと「big-bg」クラスで背景の内容を定義しています。
以下CSSのコードです。
@charset "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; } img { max-width: 100%; } /* Header部分 */ .logo { width: 210px; margin-top: 14px; } .main-nav { display: flex; font-size: 1.25rem; text-transform: uppercase; margin-top: 34px; list-style: none; } .main-nav li { margin-left: 36px; } .main-nav a { color: #432 } .main-nav a:hover { color: #0bd; } .page-header { display: flex; justify-content: space-between; } .wrapper { max-width: 1100px; margin: 0 auto; padding: 0 4% } /*Home部分*/ .home-content { text-align: center; margin-top: 10%; } .home-content p { font-size: 1.125rem; margin: 10px 0 42px; } .page-title { font-size: 5rem; font-family: 'Philosopher', serif; text-transform: uppercase; font-weight: normal; } .buttun { font-size: 1.375rem; background: #0bd; color: #fff; border-radius: 5px; padding: 18px 32px; } .buttun:hover { background: #0090aa; } .big-bg { background-size: cover; background-position: center top; background-repeat: no-repeat; } #home { background-image: url(../images/main-bg.jpg); min-height: 100vh; } #home .page-title { text-transform: none; }
「main-bg.jpg」を背景画像として表示させたいのですが、それが出来ておりません。
実現するにはどうしたらよいでしょうか？
なお、質問をする上でどういう情報が必要なのかもわかっていない状態ですので、
必要情報等のご要望がございましたらすぐに対応させていただきます。
よろしくお願い致します。
コードをブロック分けさせていただきました。
ファイルの場所の提示はどのように記述したら良いでしょうか？
わからないことばかりで申し訳ありません。
logo.svgが表示されているならパスが間違っている気がします。
url(../../images/main-bg.jpg);
としてみても表示されませんか？
HTMLが入っているフォルダと画像が入っているフォルダのパスを書けばよいです。
例1）
/site/index.html
/site/images/img.jpg
例2）
```
site
├ index.html
└ images
└ img.jpg
```
../../images/main-bg.jpgで表示されました！
大変助かりました。ありがとうございます！
【ヘルプ｜teratail（テラテイル）】
[https://teratail.com/help#resolve-myself](https://teratail.com/help#resolve-myself)
> 質問をした後に自己解決してしまった
>
> 自分で投稿した質問にも回答する事が可能です。質問文の内容を編集したりせず、回答を付けベストアンサーをクリックし解決済みにしてください。
> また後から読む人のためにも、具体的な解決手順を記載してください。
kei344様
ご教授ありがとうございます。
```
chapter4
├images
└main-bg.jpg
├c4-03-1
├WCBCafe.html
├CSS
└style.css
```
となっていましたので、../が一つ足りていませんでした。
ご回答本当にありがとうございました！
回答1件
0
自己解決
chapter4 ├images └main-bg.jpg ├c4-03-1 ├WCBCafe.html ├CSS └style.css
となっていた為、background-image: url(../../images/main-bg.jpg);
が正しい記述でした。
投稿2019/09/30 09:06
総合スコア4
あなたの回答
tips
プレビュー
