web-dev-qa-db-ja.com

CSS背景画像が読み込まれない

私はすべてのチュートリアルに従いました。 cssスタイルシートで本文の背景を指定しますが、ページには空白の白い背景が表示されます。画像は.htmlおよび.cssページと同じディレクトリにあります。チュートリアルでは

<body background="image.jpeg">

廃止予定なので、cssで、

body {background: url('image.jpeg');}

失敗。 cssスタイルシート全体を次に示します。

body 
{
background-image: url('nickcage.jpg');
padding-left: 11em;
padding-right: 20em;
font-family:
Georgia, "Times New Roman",
Times, serif; 
color: red;        
}
htmlcssimagebackground
16
jaredad7

ここに別の画像URLの結果があります..うまく動作しています...単に画像パスのみを入れています..それを確認してください..

Fiddel： http://jsfiddle.net/287Kw/

body 
{
background-image: url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
padding-left: 11em;
padding-right: 20em;
font-family:
Georgia, "Times New Roman",
Times, serif; 
color: red;


}
2
Krish

まず、これらの引用に別れを告げます。

background-image: url(nickcage.jpg); // No quotes around the file name

次に、html、css、および画像がすべて同じディレクトリにある場合、引用符を削除すると修正されます。ただし、cssまたは画像がhtmlが存在する場所のサブディレクトリにある場合は、画像へのパスが正しいことを確認する必要があります。

background-image: url(../images/nickcage.jpg); // css and image live in subdorectories

background-image: url(images/nickcage.jpg); // css lives with html but images is a subdirectory

それが役に立てば幸い。

27
Frankenscarf

同じ問題がありました。問題は画像ファイルへのパスになってしまいました。画像パスがHTMLではなくCSSファイルの場所に相対的であることを確認してください。

13
Timothy Carr

私は同じ問題に遭遇しました。フォルダ内に画像がある場合は、これを試してください

background-image: url(/resources/img/hero.jpg);

最初のフォルダーの前にバックスラッシュを置くことを忘れないでください。

4
Andrew Wiley

これを試して

_background-image: url("/yourimagefolder/yourimage.jpg"); 
_

background-image: url("yourimagefolder/yourimage.jpg");を使用したときに同じ問題が発生しました

違いを生んだスラッシュに注目してください。フォルダのレベルが、画像を読み込めなかった理由です。あなたも同じ問題に遭遇したと思います

4
user3670684

私にとっては次の行が私のために働いています、私はそれを私の身体のCSSに入れます（画像は私のCSSと.htmlファイルと同じフォルダにあります）：

background: url('test.jpg');

あなたが気にしなければならない他のことは、画像拡張子に注意してください、あなたの画像が.jpegまたは.jpg拡張子を持っていることを確認してください。ありがとう

2
Usman

問題は、画像「img/image.jpg」に短いURLを使用できないことでした

完全なURL " http://www.website.com/img/image.jpg "を使用する必要がありますが、その理由はわかりません!!

1
Omar Albeik

イメージへのパスは相対パスである必要があります。つまり、cssファイルがcssフォルダーにある場合は、パスを../で開始する必要があります。

body{
   background-image: url(../images/logo.jpg);
}

これは、../ pathでホームディレクトリに戻り、次に/ images/logo.jpg pathで画像ファイルに戻る必要があるためです。 HTML自体にcssファイルを含める場合

body{
   background-image: url(images/logo.jpg);
}
1
akaMahesh

少なくとも1時間はこの問題にとらわれていたので、デバッグプロセスを共有したいと思います。ローカルホストの実行中に画像が見つかりませんでした。コンテキストを追加するために、次のディレクトリにあるRailsアプリ内でスタイルを設定しています：

apps/assets/stylesheets/main.scss

背景画像をヘッダータグでレンダリングしたかった。以下は私の最初の実装でした。

header {
    text-align: center;
    background: linear-gradient(90deg, #d4eece, #d4eece, #d4eece),
              url('../images/header.jpg') no-repeat;
              background-blend-mode: multiply;
              background-size: cover;
}

...その結果、RailsサーバーとコンソールでChrome devツールでそれぞれ次のエラーが発生しました：

ActionController::RoutingError (No route matches [GET] "/images/header.jpg")
GET http://localhost:3000/images/header.jpg 404 (Not Found)

URLのさまざまなバリエーションを試しました。

url('../images/header.jpg') # DID NOT WORK
url('/../images/header.jpg') # DID NOT WORK
url('./../images/header.jpg') # DID NOT WORK

そして、それはまだ機能しませんでした。その時点で、私は非常に混乱していました...私は画像フォルダをアセットディレクトリ（デフォルト）からスタイルシートディレクトリ内に移動することを決め、次のURLのバリエーションを試しました：

url('/images/header.jpg') # DID NOT WORK
url('./images/header.jpg') # WORKED
url('images/header.jpg') # WORKED

コンソールはもう入手できず、Railsサーバーエラー。しかし、何らかの理由で画像が表示されませんでした。一時的にあきらめた後、画像を表示するための順序...

header {
    text-align: center;
    height: 390px;
    background: linear-gradient(90deg, #d4eece, #d4eece, #d4eece),
              url('images/header.jpg') no-repeat;
              background-blend-mode: multiply;
              background-size: cover;
}

残念ながら、「../ images/header.jpg」を使用した3つの初期URL試行がlocalhostで機能しなかった理由や、URLの先頭にピリオドを追加する必要があるかどうかを、まだわかりません。

Application.html.erbでデフォルトのリンクタグがどのように設定されているか、または.scssと.cssの関係に関係している可能性があります。または、それはおそらくurl（）のbackgroundプロパティが機能する方法です（画像はcssファイルと同じディレクトリ内にある必要があります）？とにかく、これはローカルホストにロードされないCSS背景画像の問題を解決した方法です。

1
George.

Wamp-serverがインストールされたApache Webサーバーのドキュメントルートを変更しました。したがって、相対URL（つまり、images/img.png）を使用しても機能しませんでした。それが機能するためには、絶対URLを使用する必要がありました.

background-image：url（ " http：//localhost/project_x/images/img.png "）;

0
user3172852

画像とcssフォルダーを親ディレクトリ内に配置する場合、アセットを想定すると、次のコードは完全に機能します。二重引用符または二重引用符なしのどちらでも正常に機能します。

body{
   background: url("../image/bg.jpg");
}

クラスを呼び出して特定の場所に背景画像を配置しようとする場合など、他の場合には、高さと幅も指定する必要があります。

0
user1957229

次のコードは、somefolder/assets/img/background_some_img.jpgに画像を配置した場所で機能しました。

background-image: url('../img/background_some_img.jpg');
background-size: cover;
background-repeat: no-repeat;
0
user7702588