Q&A
ご回答有難うございました。
下記のソースをCSSファイルに記述し、それをHTMLファイルに読み込むと画像(background: url(./image/close.png) no-repeat;)が表示されなくなります。
しかし、CSSファイルから読み込むのではなく直接HTMLファイル内のhead要素に記述すると画像が表示されるようになります。
CSSファイルは、画像に関するソース以外は何も記述していないですし、head要素に記述するとちゃんと表示されることからソースそのものの誤植でもないですし原因が全くつかめません。
css
1@charset "utf-8"; 2 3.gnavi_batu { 4 /*backgroundからbackground-image,background-repeatにしたところ、何も表示されなかったところから背景が白色の四角形が出現するようになった。。*/ 5 /*background-image: url(image/close.png); 6 background-repeat: no-repeat;*/ 7 background: url(./image/close.png) no-repeat; 8 border: medium none; 9 width: 50px; 10 height: 50px; 11 position: absolute; 12 right: 30px; 13 top: 30px; 14}
HTMLファイル
html
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8" /> 5<title>試作</title> 6<link rel="stylesheet" href="./css/test.css"> 7<style type="text/css"> 8body { 9 background: lightblue; 10} 11/*CSSファイルで画像が表示できなかったのでhead内に記述している。*/ 12.gnavi_batu { 13 background: url(./image/close.png) no-repeat ; 14 border: medium none; 15 width: 50px; 16 height: 50px; 17 position: absolute; 18 right: 30px; 19 top: 30px; 20} 21</style> 22</head> 23<body id="index"> 24 25<div class="gnavi_batu"></div> 26 27</body> 28</html>
回答3件
0
外部CSSの格納場所はHTMLの場所と 階層が違う のですよね？だとすると、こういう事では？
【HTMLに記載した場合】
./image/close.png
【外部CSSに記載する場合】
../image/close.png
投稿2015/11/20 10:31
総合スコア5936
0
http://d.hatena.ne.jp/takami_hiroki/20110303/p1
相対パスでの画像指定は、CSSファイルから見たパスである必要があります。
今回の場合だと、cssディレクトリがhtmlのディレクトリより一つ深いところにあるので
CSS
1background: url(../image/close.png) no-repeat ;
と記述するか、htmlファイルと同じディレクトリに置けば表示されるはずです。
投稿2015/11/20 10:18
総合スコア18713
0
ベストアンサー
相対パスでURIを指定する場合には、HTML文書からのパスではなく、CSSファイルからのパスを指定します。
おそらく、そのHTMLファイルとCSSファイルがあるディレクトリ階層が違うのではないでしょうか。
投稿2015/11/20 10:16
総合スコア36115
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。