2011-11-08 34 views
2

私は繰り返しを繰り返したい背景画像を持っていますが、ページを表示しようとすると何も表示されません。私はまた、CSSファイルが頭に追加されたことをFirebugが示しているので、私は問題の原因ではないと確信しています。背景画像は表示されません

編集:問題はブラウザがファイルを見つけることができないことですが、リンクしようとするとファイルが見つからないという問題があります。

サイトのアーカイブをダウンロードすることができます。 http://cdn.duffcraft.net.adam543i.net/sitebkp-1845.zip わずか200キロバイトです。大規模なものはありません。

+0

ないリソースチェックの観点で行いますが、(リソース]タブで)URLパスが有効なファイルを指している場合Chromeであなたが見ることができるもの放火犯を確認してください。ブラウザがあなたの背景イメージを見つけることができないのでしょうか? – musefan

答えて

1

イメージファイルへのパスが正しいことは確かですか? Firebugは画像をロードしますか?

あなたのファイル構造は、あなたのstyle.cssから、あなたのイメージファイルへの相対パスを使用する必要があり、おそらく今、この

index.html 
css/ 
    style.css 
img/ 
    night/ 
     night-tile.png 

のようなものです。したがって、img/night/night-tile.pngではなく、../img/night/night-tile.pngです。あなたのパスでは、それは間違っているcssディレクトリ内の画像を探しています。

==更新==はあなたのコードをダウンロードした後、私は2以上のエラーを発見しました。

最初に、スタイルシートにリンクしている<link>要素にrel=stylesheetを追加するのを忘れてしまったことがあります。この方法では、ブラウザはスタイルシートであることを知らないでしょう。

night.cssの最初のルールの最後に;を追加するのを忘れてしまったため、バックグラウンドルールが表示されないという解析エラーが発生しました。

これらの問題を解決する幸運!

+0

私はこれを試しましたが、ファイルを見つけることができません。 – Mythrillic

+0

私はあなたのマシン/サーバー上のパスを調べることができると思いますか? – vindia

+0

できますが、うまくいかないようです。私はサイトを圧縮し、あなたにリンクを与えます。 – Mythrillic

0

要素には高さがありません(明示的または内容による)。

これは、画像を見るための要素の可視ピクセルがないことを意味します。

2

div要素を使用すると、Chromeブラウザを使用している場合は、CSS

#header { 
    background-image:url(img/night/night-time-tile.png); 
    background-repeat:repeat-x; 
    position:absolute; 
    height:100px; // Adjust height according to your image height 
    top:0; 
    left:0; 
} 
1

次displayed.Tryを取得した背景画像が表示される要素を検査しませんあなたのヘッダー内のテキストが存在しないので。放火犯ウィンドウ

​​

で背景画像の宣言を超える

ホバー、あなたは画像のフルパスが表示されます。

このスクリーンショットでは、ページの上部にあるstackoverflowロゴに相当するものが表示されます。

次に、CSSの宣言をクリックして、画像の正しいパスを見つけるまでURLを変更できます。

enter image description here

+0

これは私を助けました。私はファイル名を変更する必要がなくなり、それがうまくいった。私は理由を知りませんが、今はうまくいきます。 ;) – Mythrillic

+0

@ Adam543i - 喜んで助けてください。 –

関連する問題