Q&A
迅速な回答ありがとうございました！
前提・実現したいこと
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件
0
何も表示されないなら、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
総合スコア8402
0
いまの情報からですと、以下どちらか？
- bg_slider.jpgのhtmlからの相対位置が違って参照できない
- 参照されているけどサイズがおかしくて一部しか表示されない
投稿2021/05/07 12:15
総合スコア116724
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/08 05:28