Q&A
CSSのurl()で相対パスを使用する場合は、HTML文書からのパスではなく、そのCSSファイルからのパスを指定します。
cssにて背景に画像を設定したいのですがなぜか背景が設定されません。
ディレクトリのファイルの所在地やスペルを確認したのですが異常が見つかりません。
またロゴ画像も同じファイルに入れているのですがロゴに関しては表示されています。
ちなみにロゴはhtmlにて表示しており、背景はCSSで表示してあります。
”や’を外したのですが変わりません。どなたか教えていただけませんか？
html
1コード 2```<!doctype html> 3<html> 4 <head> 5 <meta charset="utf-8"> 6 <title>diary & output reading book</title> 7 <meta name="description"> 8 <link rel="stylesheet" href="../public/css/stylesheet.css"> 9 </head> 10 <body> 11 <header> 12 <div class="header-left"> 13 <img class="logo" src="../public/image/logo.png" alt="ロゴ"> 14 <h1>H.K DIARY</h1> 15 </div> 16 <div class="header-right"> 17 <ul> 18 <li>TOP</li> 19 <li>INFO</li> 20 <li>DIARY</li> 21 </ul> 22 </div> 23 </div> 24 </header> 25 <div class="g-wrapper"> 26 27 </div> 28 <div class="hobby"> 29 30 </div> 31 <footer> 32 33 34 </footer> 35 </body> 36</html> 37```css 38コード 39```body{ 40 width:100%; 41 margin:0; 42 43} 44header{ 45 width:100%; 46 height:80px; 47 background-color:#7aa5d2; 48 font-family:kulminoituva; 49 color:white; 50 51} 52.logo{ 53 width:80px; 54 height:auto; 55 float:left; 56} 57.header-right{ 58 float:right; 59} 60.header-right li{ 61 list-style: none; 62 float:left; 63 padding: 20px; 64 font-size: 30px; 65} 66.header-left h1{ 67 float: left; 68 padding-left: 30px; 69 font-size:60px; 70 position:relative; 71 top:-20px; 72} 73.g-wrapper{ 74 background-image:url("../public/image/1.jpg"); 75 background-size: cover; 76}
回答2件
0
ベストアンサー
「背景」とおっしゃっているのはこの中に表示されることを期待していますか？
<div class="g-wrapper"> </div>
このブロックに幅も高さも無いから何も表示されないのだと思います。
たとえば
width: 100%; height: 100vh;
を指定したら表示されませんか？
投稿2021/05/03 11:12
総合スコア8402
0
ご回答いただきましてありがとうございます！
サイドを見直したところhtml側の表示と同様にファイルを指定していたのですが
css側でファイルの指定をpublicを抜いて指定したところちゃんと表示されました。
理由はよくわかりませんが階層を少し下げたら表示されるようになりました。
理由は何なんですかね？
コード html側の画像表示 <img class="logo" src="../public/images/logo.png" alt="ロゴ"> css側の背景表示 background-image:url("../images/1.jpg");
投稿2021/05/03 11:54
総合スコア52
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/03 11:17
2021/05/03 11:22