背景图像不会出现

Question

我有一个我想重复的背景图片（repeat-x）但是当我尝试查看页面时，没有任何显示。我也使用javascript在一天中的不同时间使用不同的CSS文件，但我确信这不是问题，因为firebug显示CSS文件已添加到头部。

编辑：问题是浏览器无法找到该文件，但是当我尝试链接到它时，它仍然无法找到该文件。

您可以在此处下载该网站的存档： http://cdn.duffcraft.net.adam543i.net/sitebkp-1845.zip 它只有200左右的kb。没什么大不了的。

Answer 1

由于标题中没有文字，div不会显示。请尝试以下css

#header {
    background-image:url(img/night/night-time-tile.png);
    background-repeat:repeat-x;
    position:absolute;
    height:100px;  // Adjust height according to your image height 
    top:0;
    left:0;
}

Answer 2

您确定图像文件的路径是否正确？ Firebug会加载图像吗？

您的文件结构可能就像这样

index.html
css/
    style.css
img/
    night/
        night-tile.png

现在，从您的style.css开始，您必须使用图像文件的相对路径。所以不是img/night/night-tile.png而是../img/night/night-tile.png。在您的路径中，它正在css目录中查找图像，这是错误的。

<强> ==更新==

下载代码后，我发现了2个错误。

首先，您忘记将rel=stylesheet添加到链接到样式表的<link>元素中。这样，浏览器就不会知道它是样式表。

第二，您忘记在;的第一条规则末尾添加night.css，从而导致解析错误，导致无法呈现背景规则。

祝你好运解决这些问题！

Answer 3

如果您使用的是Chrome浏览器，请检查应出现背景图像的元素。

将鼠标悬停在firebug窗口中的background-image声明

上

background-image:url(img/night/night-time-tile.png);

您将看到图像的完整路径。

在屏幕截图中，您可以看到页面顶部的stackoverflow徽标的等效内容。

然后，您可以点击css声明并更改网址，直到找到图片的正确路径。

Answer 4

元素没有高度（显式或来自内容）。

这意味着元素没有可见的像素来查看图像。