html - 背景-画像がレンダリングされない

Question

ブラウザに読み込まれている背景画像がありますが、ページにレンダリングされていません。コードは次のとおりです。

HTML

<body>
  <div id="mainContainer">
  </div>
</body>

CSS

#mainContainer
{
   background-image:url('bckgrdImg.png');
}

それでおしまい。レンダリングする画像が必要です。繰り返しになりますが、Chromeでページを調べると、画像がブラウザに読み込まれているのがわかりますが、ウェブページにはありません。何かご意見は？ありがとう。

score 2 · Accepted Answer

divに幅と高さを指定してみてください。それを見ると、divの高さが0であるためです。

score 2 · Accepted Answer

リンクは非常に役立ちます。

ただし、最初に#mainContainerで幅と高さを設定してみてください。

好き：

#mainContainer
{
    width: 100%;
    height: 100%;
   background-image:url('bckgrdImg.png');
}

score 2 · Accepted Answer

こんにちは、あなたはデフォルトであり、少なくともあなたを定義するので、少なくともmin-heightあなたを定義しますdivr div id width100%height is 0min-heightdiv

このように

#mainContainer
{
   background-image:url('bckgrdImg.png');
   min-height:200px;  // height define according your design or background images
}

score -1 · Accepted Answer

一重引用符を削除します

#mainContainer
{
   background-image:url(bckgrdImg.png);
}

このdivのディメンションを定義する必要がある場合があります。divに幅と高さcssがない場合、divは0pxx0pxであるため非表示として表示されます:)

#mainContainer
{
   background-image:url(bckgrdImg.png);
   height:100%;
   width:100%
}

4 に答える 4