web-dev-qa-db-ja.com

CSS背景画像が表示されない

debut_dark.pngという画像を持つimgというサブディレクトリを持つHTMLファイルがあります。私のCSSファイルには、次のものがあります。

body { 
    background: url(/img/debut_dark.png) repeat 0 0;
}

HTMLファイルにはbodyタグがあり、CSSファイルが適切に含まれています。他のすべてが適切にフォーマットされているため、CSSファイルが適切に含まれていることは確かです。

背景画像が表示されず、白い背景しか表示されません。これを修正する方法、さらにはデバッグする方法はありますか？

htmlcsspathbackground-image
24
darksky

あなたのCSSファイルパスに従って、私はそれがあなたのHTMLページと同じディレクトリにあると思います、あなたは次のようにurlを変更しなければなりません：

body { background: url(img/debut_dark.png) repeat 0 0; }
16
SaidbakR

次のように使用する必要があります。

 
 body {
 background：url（ "img/debut_dark.png"）repeat 0 0; 
} 
 
 body {
 background：url（ "../ img/debut_dark.png"）repeat 0 0; 
} 
 
 body {
 background-画像：url（ "../ img/debut_dark.png"）repeat 0 0; 
}

または、Firefox Firebugツールを使用してCSSルールを調べてみてください。

12
Surinder ツ

私はこれがOPの正確なケースに対応していないことを知っていますが、Googleから来ている他の人にとっては、要素タイプに基づいてdisplay: block;を試すことを忘れないでください。 <i>に画像がありましたが、表示されませんでした...

4
daniel.caspers

体に高さがあることを確認してくださいf.ex：

body { 
    background: url(/img/debut_dark.png) repeat;
    min-height: 100%;
}
3
David Hellsing

同じ問題があります。しかし、それは私にとって適切に動作します

background: url(../img/debut_dark.png) repeat
3
Peter Focus

これらの追加のプロパティに加えて

background-image：url（ 'path'）no-repeat 0 0;

  1. 要素に寸法を設定します

    width：x;高さ：y;

  2. 背景サイズ：100％

    • このプロパティは、要素に対して定義した上記の寸法に画像を合わせるのに役立ちます。
2
Jay

URLで相対パスを使用する必要があります。 index.htmlが存在するルートディレクトリに2つのフォルダーを作成したと思います。 1つは「CSS」フォルダーで、もう1つは「img」フォルダーです。

次に、cssファイルの「img」フォルダーにアクセスする必要がある場合。したがって、「../」構文を使用してルートディレクトリに1回戻る必要があります。次に、「../ img」構文を使用して「img」フォルダーに移動します。次に、イメージ名「../img/debut_dark.png」を記述します。

2
ANIL PATEL
body { 
        background: url("../img/debut_dark.png") no-repeat center center fixed;
    }

私のために働いた。

2
Daiana

同じ問題がありました。私にとっては：

  background: url("../img/green.jpg") no-repeat center bottom/cover;
  height: 100vh;
0
Eduard

さて、この属性は完全な場所が提供されたときに画像を表示することがわかりました。その画像をサーバーにアップロードし、その画像の場所をbackground-image：url（ "xxxxx.xxx"）にリンクしました。属性が最終的に機能しましたが、サーバーがない場合は、その画像のプロパティに移動して、属性に画像の完全な場所を入力してみてください。私はこの属性をHTMLファイルのタグで使用していましたが、CSSファイルでも確実に動作しますが。その方法が機能しなかった場合は、behance、facebook、instagramなどのようにインターネットに画像をアップロードし、画像を検査して、その場所を属性にコピーしてみてください。

0
Praks

あなたのパスが正しい場合、私はあなたのボディセクションに要素がないと思います。本体の高さを定義するだけで、コードが機能します。

0
Aman Jha

ローカルコンピューターで埋め込みCSSを使用しています。 atom.jpgファイルをhtmlファイルと同じフォルダーに配置すると、次のコードが機能しました。

background-image:url(atom.jpg);
0
user3216740

私は同じ問題を抱えていました、繰り返し0 0部分を削除した後、それは私の問題を解決しました。

0
Prakash Poudel