背景画像を指定する方法について

CSSのDiv classを指定して背景を画像にしようとしていますが、
うまく設定されません。
どなたかご指導頂きたく。
宜しくお願いします。

※アドレスや画像の名前誤りはなく、画像は「img」フォルダに格納済みです。

(html)

<head>
<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
<body id="sample">
	<div id="web" ><!-- web開始 -->
		<div id="menu"><!-- menu開始 -->
		 <div class="top"><!-- TOP画 -->
			 test
			</div><!-- top終了 -->

(CSS)

body { margin:0; 
       font-size: 1em; }

#web { width: 90%;
       margin: auto;
       padding: 0%; }

#head { width: 100%; }

#menu { width: 20%;
	    margin-top: 10px;
	    display: block;
        float: left; }

#main { width: 79%;
        float: right; }

.top  { width: 100%;
	    height: 200px;
        background-image: url("img/top.png"); }

(フォルダ階層)

homepage---index.html
css--------style.css
img---top.png

m.ts10806

2018/09/25 12:02

ソースコードはマークダウンのcode機能を使ってください。質問・解説内容とコードとの境目が不明瞭となりますし、code機能では正しくコードをコピペできるようになりインデントもつけられて読みやすくなり、再現確認も容易となりますので、的確な回答が得やすくなります。

m.ts10806

2018/09/25 12:03

画像パスは「CSSから見た相対パス」にしていますか？フォルダ構成などもご提示いただければと。

m.ts10806

2018/09/25 12:04

あと、念のため、heightも指定してみてください。

m.ts10806

2018/09/25 12:51

CSSの読み込みはできていますか？可能であればそこも含めて全体がわかるhtmlを提示していただければと

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

回答1件

ベストアンサー

正しくCSSが読み込まれていて、CSSから画像のパスが正しいのでしたらこのコードでは「背景が設定されない」という現象は再現しません（ローカル環境で確認）

フォルダ階層からするとCSSファイルはhtmlより1つ上の階層にあるようですので、
下記のようにlinkすることになるかと思います。

html
1    <link rel="stylesheet" type="text/css" href="../style.css"/>

ただ、懸念点として「homepage」というディレクトリの存在です。
※ローカルPCでfile://というアドレスから始まるURLでアクセスしているのであればこの懸念点はスルーしてください。

どのような環境でアクセスされているのかわかりませんが、
もしローカルPCではなくてサーバーの場合、http://ドメイン/でアクセスされた際に表示されるのがそのhomepage/index.htmlだった場合、
CSSもimgもブラウザから参照できない場所にあることになります。
その辺りは問題ないですか？

投稿2018/09/25 13:01

m.ts10806

総合スコア80850