Q&A
前提・実現したいこと
id名がtopのdivにbackground-imageで背景を表示させたいのですが、styleタグを利用して表示させようとしても何も変化がありません。
検証した結果、ファイルが見つからないという趣旨のエラーメッセージが出たのですが画像ファイルはフォルダ内のhtmlファイルと同じ階層に準備しています。
改善策をお願いします。
発生している問題・エラーメッセージ
Failed to load resource: net::ERR_FILE_NOT_FOUND
該当のソースコード
HTML
1<!doctype html> 2<html class="no-js" lang=""> 3 4<head> 5 <meta charset="utf-8"> 6 <title></title> 7 <meta name="description" content=""> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 10 <meta property="og:title" content=""> 11 <meta property="og:type" content=""> 12 <meta property="og:url" content=""> 13 <meta property="og:image" content=""> 14 15 <link rel="manifest" href="site.webmanifest"> 16 <link rel="apple-touch-icon" href="icon.png"> 17 <!-- Place favicon.ico in the root directory --> 18 19 <<!-- CSS only --> 20<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> 21 <meta name="theme-color" content="#fafafa"> 22 23</head> 24<body> 25 26 <style> 27 #top{ 28 background-image:url(mizugi.jpg); 29 background-size:cover; 30 background-position:center center; 31 background-repeat: no-repeat; 32 } 33 </style> 34 35<div class="container p-4"> 36</div> 37 38 <div id="top"class="container mt-5 p-5 w-50"> 39 40 <div class="row flex-column d-flex align-items-center justify-content-center"> 41 42 <h1 class="col-3 text-center mb-5">クイズ</h1> 43 <button type="button" class="col-2 btn btn-primary mb-3">初級</button> 44 <button type="button" class="col-2 ml-1 btn btn-primary mb-3">中級</button> 45 <button type="button" class="col-2 ml-1 btn btn-primary mb-3">上級</button> 46 <button type="button" class="col-2 ml-1 btn btn-primary mb-3">冥府級</button> 47 48 </div> 49 50 </div> 51</body>
回答1件
0
ベストアンサー
ご記載のソースコードを用いて私の環境で試したところ画像が表示されました。
mizugi.jpgと実際のファイル名に間違いはないでしょうか？
投稿2021/08/27 09:16
総合スコア31
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/08/27 11:37