Q&A
コードはマークダウンのcode機能を利用してご提示ください
CSSで背景画像設定したのですが表示されません
どうすればいいでしょうか
＜追加
ブラウザはchromeで動作確認をしています。
自身で行ったことはデレクトリの表記法が間違っていないかと相対パスの確認、画像表示コードに間違いがないかを確認しました。
相対パス等についてはエラー表示がないのであってると感じます。
回答の一つに書かれていたように<link rel="stylesheet" href="css/style.css">
を<link rel="stylesheet" href="CSS/style.css">とcssを大文字に直しました。
それでも依然として背景画像の表示がされないです。
＞
ファイル構造
maincode
┝CSS
┃ ┝style.css
┃
┝img
┃ ┝ mainvisual.png
┃
┝index.html
CSS
1.home-pic{ 2 background-image: url(../img/mainvisual.png); 3 } 4 5 6
HTML
1コード<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <link rel="stylesheet" href="css/style.css"> 10</head> 11<!-- home --> 12<div class="home"> 13 <div class="home-pic"> 14 </div> 15 <div class="home-text"> 16 <div class="home-tlt"> 17 <h1 home-h1>一番伝えたいことを書く</h1> 18 <div class="home-p"> 19 <p>リード リード リード</p> 20 </div> 21 </div> 22 </div> 23 <button class="home-button">お問い合わせ</button> 24 <script src="js/script.js"></script> 25</div> 26</html> 27</body> 28 29
また、コードが置かれているOS
動作確認したブラウザも記載してください。
なお、当該問題に類するものは過去質問にも出ていますし、調べようがない内容ではないです。
ご自身が調べたこと試したことを記載してください
<div class="home-pic">～</div> に文字を入れるとどうなりますか？
x_xさんが書かれてるように、
<div class="home-pic">
</div> の開始タグと閉じタグの中に何らかのhtmlがないと何も表示されないと思います。何だったら全角スペースでも良いので入れてみてください。
有難うございます！皆さんのアドバイスで無事できそうです！
回答2件
0
HTMl
1 2<link rel="stylesheet" href="CSS/style.css"> 3
大文字小文字は区別されます。
CSS
1 2.home-pic{ 3background-image: url('img/mainvisual.png'); 4} 5
ディレクトリについては知らん
ご自分でどうぞ
投稿2019/11/06 01:43
編集2019/11/06 01:56
総合スコア10429
0
自己解決
以下の方法で改善できました！
・<link rel="stylesheet" href="CSS/style.css">とcssを大文字に直す
・<div class="home-pic">の</div> の開始タグと閉じタグの中に何らかのhtmlがないと何も表示されないためスペースでも良いので入れてみる
協力してくださった方々本当に有難うございます！
投稿2019/11/06 07:30
総合スコア17
あなたの回答
tips
プレビュー
