cssでbackground-imageが表示されない

前提・実現したいこと

webサイトの背景画像を設定・表示させたい

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

webサイトに背景画像が表示されない

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3    <head>
4        <meta charset="utf=8">
5        <title>progate</title>
6        <link rel="stylesheet" href="stylesheet.css">
7    </head>
8    <body>
9        <header>
10            <div class="header-list">
11    
12            </div>
13        </header>
14        <div class="main">
15            <div class="top-wrapper">
16                <h1>ようこそ</h1>
17            </div>
18        </div>
19        <div class="example">
20
21        </div>
22    </body>
23</html>
24```css
25h1 {
26    color: gold
27}
28
29.main {
30    height: 200px;
31    **background-image: url(bg_slider.jpg);**
32    background-size: cover;
33}
34
35.top-wrapper img {
36    width: 100%;
37    height: 200px
38}
39
40### 試したこと
41
42・cssでbackground-imageプロパティを使ったが、何も表示されない。
43・html でimgタグを用いたら、画像のボーダーらしきものは出現したが肝心の画像は表示されなかった。
44
45### 補足情報（FW/ツールのバージョンなど）
46
47・vscodeを使っています。
48・表示するブラウザはクロームです。

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

回答2件

何も表示されないなら、bg_slider.jpgがそのhtmlファイルと同じディレクトリ（フォルダ）に無いことが考えられます。まずはそこを確認してください。
で、ファイルがちゃんとあれば表示はされるはずですが、.mainにはheight:200px;が設定されているので、画像の上200ピクセルしか表示されないと思います。
画像をページ全体に表示したいなら、

CSS
1body {
2  background: url(bg_slider.jpg);
3  background-size: cover;
4}

とすると良いです。

投稿2021/05/07 12:21

itagagaki

総合スコア8402

kaitoo

2021/05/08 05:28

表示できました！画像ファイルがディレクトリになかったことが原因だったみたいです。迅速かつ的確な回答ありがとうございました！

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

いまの情報からですと、以下どちらか？

bg_slider.jpgのhtmlからの相対位置が違って参照できない
参照されているけどサイズがおかしくて一部しか表示されない

投稿2021/05/07 12:15

yambejp

総合スコア115010

kaitoo

2021/05/08 05:28

迅速な回答ありがとうございました！

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

あなたの回答

tips

プレビュー

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

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

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

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

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

質問する

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

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