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

私は既に自分のURLとファイルの名前を二重にチェックしていますが、画像が表示されないようです。それはなぜそれのようなものですか？ここに私のコードがあります（<p>は本文タグの中にあります、私は完全なコードを加えなかった、私は頭と特定の問題を追加しました）。存在しない場合、それはあなたのスタイルシートフォルダ内の画像フォルダを探している../なければHTMLとCSS背景画像が表示されない

background-image: url(../images/background.gif);

：

<html> 
    <head> 
    <title>Head First Lounge.</title> 
     <link type="text/css" 
      rel="stylesheet" 
      href="stylesheet/style.css" 
      media="screen"/> 
    </head> 


<p class = "guarantee"> 
    Our guarantee: at the lounge, we're committed to providing you, 
    our guest, with an exceptional experience every time you visit. 
    Whether you're just stopping by to check in on email over an 
    elixir, or are here for an out-of-the-ordinary dinner, you'll 
    find our knowledgeable service staff pay attention to every detail. 
    If you're not fully satisfied, have a Blueberry Bliss Elixir on us. 
</p>

そして、ここではその部分のCSSルールはこれを試してみてください

.guarantee{   
     background-image: url(images/background.gif); 
     font-family: "Geogia", "Times New Roman", Times, serif; 
     border-color: black; 
     border-width: 1px; 
     border-style: solid; 
     background-color: #a7cece; 
      padding: 25px; 
      margin: 30px; 
      line-height: 1.9em; 
      font-style: italic; 
      color: #444; 
}

出典

2012-01-12 user962206

画像のURLは何ですか？ /images/background.gifまたは/stylesheet/images/background.gif – KingCronus

はimage/background.gifにあります。これがメインのHTMLページです – user962206

'background-image：url（../ images/background.gif）に変更 ' –

です。だから、イメージフォルダが置かれているディレクトリに戻る必要があります。

編集：ブラウザは、現時点では、あなたのスタイルシートディレクトリ内の画像を検索します

.guarantee{ 
    background: #a7cece url(../images/background.gif); 
    border: 1px solid black; 
}

出典

2012-01-12 16:52:34 Drew

つまり、スタイルシートの外部コンテンツは、スタイルシートのパスに相対的にリンクされています。スタイルシートが 'stylesheet/style.css'にある場合、' images/bg.gif'は 'stylesheey/images/bg.gif'に解決されます。 –

さて、私はついにそれを働かせました。私は実際に私は別のパスにあったとイメージフォルダは、メインページのゴシックと同じパスではないことを実現したことはありません、また、いくつかの便利なヒントを追加していただきありがとうございます！私は特にCSS、Webプログラミングに新しいです。ありがとう！ – user962206

非常に便利な投稿です！ – nckbrz

：あなたはまた、そうのようなあなたのCSSスタイルを短縮することができます。

が問題の原因である可能性があります

background-image: url(/images/background.gif);

に

background-image: url(images/background.gif);

を変更しようとする価値があるかもしれません。

出典

2012-01-12 16:53:11 KingCronus

-1

画像パスにスラッシュ（/）の代わりにバックスラッシュ（\）を使用している可能性があります。

私はこの間違いを犯し、私のクロームブラウザと戦っていました。私は（バックスラッシュを使用しています）、Windowsエクスプローラから

出典

2014-10-02 17:21:31

をイメージパスをコピーし、私は画像のURL

（例の先頭に/追加することによって、それを解決し、これと同じ問題を抱えていた：背景画像：のURL（/画像/ background.gif）;）

・ホープ、このことができます:)

出典

2015-08-11 14:07:52 Seth

を、私はこの答えは少し遅れているが、このリンクはあなたのCSSファイルパスの詳細な説明を与えることを知っています。

/ returns to the root directory 
../ moves one directory backwards 
../../ moves two directory backwards

https://css-tricks.com/quick-reminder-about-file-paths/

出典

2016-02-13 18:30:43

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

答えて

関連する問題