背景圖片未渲染

Question

我有一個正在加載到瀏覽器中的背景圖像，但是它沒有在頁面上呈現。 這是代碼：

HTML

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

CSS

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

而已。 我只需要圖像即可渲染。 同樣，當我在Chrome中檢查頁面時，我看到圖像已加載到瀏覽器中，但它不在網頁上。 有什么想法嗎？ 謝謝。

Answer 1

嘗試給div一些寬度和高度。 這是因為如果您查看它，div的高度為0。

Answer 2

鏈接將非常有幫助。

但是，請先嘗試在#mainContainer上設置寬度和高度。

喜歡：

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

Answer 3

您好，請至少定義div min-height ，因為您的r div id width默認為100% ， height is 0不是至少定義div min-height

像這樣

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

Answer 4

刪除單引號

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

您可能需要為此div定義尺寸。 當div中沒有寬度和高度css的div時，div將顯示為不可見，因為它是0px x 0px :)

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