在 css 中指定的背景图像未呈现

Question

我有一个我开始构建的 PHPBB 主题。在 CSS 文件中，我有三个项目——一个主体和两个 div——带有背景图像。 div 的背景图像已停止在所有浏览器中工作。

呈现主题的网站在这里：https://www.tarazedi.com/index.php?style=7

问题图片在这里：https://www.tarazedi.com/styles/wTcFresh/theme/images/site_banner.png

CSS 位于 wTcFresh/theme/。

图像都在相同的位置，但似乎存在路径问题，但工作非常奇怪。我尝试过使用相对 URL 和绝对 URL。我试过 url(x);、url('x'); 和 url("x");并更改其他背景元素。在任何情况下，横幅和徽标图像都没有开始工作，但是尽管身体图像在同一个地方并使用相同的语法，但它仍然可以正常工作。当我在 Chrome 中检查 div 的计算样式时，图像将正确显示为完整的绝对 URL，但相对链接链接到 tarazedi.com/images/site_banner.png，它返回 500 错误，因为该 URL 显然是无用的.在 Edge 和 Firefox 中，检查器会显示图像的正确链接，但仍无法呈现。

我每次尝试修复它时都清除了浏览器和站点端的缓存。

我很困惑。我错过了什么？

body {
    color: #CCCCCC;
    background-color: #000000;
    background-image: url("images/bg.jpg");
    background-attachment: fixed;
}

.headerbanner {
    border: #009900 solid 4px;
    border-radius: 40px;
    background-image: url("images/site_banner.png");
    background-attachment: fixed;
    background-position: right;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
}

.headerlogo {
    border: #003300 solid 4px;
    border-radius: 36px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-image: url("images/site_logo.png");
    background-attachment: fixed;
    background-position: left center;
    vertical-align: middle;
}

Answer 1

为了达到预期的效果，调整背景位置，背景图像没有问题

1.去掉背景：位置看区别

Answer 2

编辑它从而解决了问题，现在它可以正确呈现。非常感谢！

.headerbanner {
    border: #009900 solid 4px;
    border-radius: 40px;
    background-image: url("images/site_banner.png");
    background-position: right;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
}

.headerlogo {
    border: #003300 solid 4px;
    border-radius: 36px;
    background-image: url("images/site_logo.png");
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: left;
    align-items: center;
}

Answer 3

您正在使用images/bg.jpg。这指的是当前目录中名为“images”的文件夹。如果将其替换为/images/bg.jpg，它将是网站根目录下名为“images”的目录。