Question

我的背景图片仅显示在一个页面中，而不显示在另一个页面中。我两个都使用相同的CSS代码，但只有一个似乎正在运作。

这是我的CSS：

body {
   padding-top: 40px;
   padding-bottom: 40px;
   background-image: url('img/background.jpg'); 
   background-size: cover;
}

页面的屏幕截图：

Answer 1

您的第二页可能无法找到您想要的img作为背景，因此无法使用它。如果您还没有尝试过，请尝试将两个HTML文档和所需的图像全部放在同一个文件夹中。

Answer 2

Yuor问题是页面几乎肯定找不到图像。

您的背景说明：

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

实际上是这样说的：

background-image: url(<curent HTML page directory>/'img/background.jpg');

这是参考资源的一种不良方式

由于参考不是绝对的，正如您所遇到的那样，引用相对于您在网站上的当前位置。是的，您的页面加载相同的CSS文件，但CSS文件使用HTML页面的目录调用它，不它自己的存储目录。

要解决此问题并使此背景无论您在哪个网站页面上都能正常工作，您需要为CSS提供绝对图像参考。绝对引用以斜杠/开头，表示网站URL的基础，请参见http://www.sitename.com/ <==此结尾斜杠与基本斜杠相等。

所以，

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

现在意味着

background-image: url(<website base directory>'/img/background.jpg');

这实际上意味着：

background-image: url('http://www.sitename.com/img/background.jpg');

无论哪个页面，在哪个文件夹中调用此CSS文件都可以正常工作。只要此绝对路径到达有效的图像文件，该文件将由CSS加载。