外部css中引用的背景图像未加载

Question

我在外部css文件中有这个，但它根本不工作。我认为我写错了，但在内部放置时，它工作正常。关于可能发生什么的任何想法？

html
{
background-image:url(images/background-grid.jpg);
background-repeat:repeat;
}

Answer 1

我假设您的CSS文件位于这样的文件夹中。

    /
        css/
            yourcss.css
        images/
            background-grid.jpg
        index.html

CSS文件中给出的路径相对于CSS文件的路径（在我给出的示例中，css文件夹）。所以你应该使用..：

background-image: url(../images/background-grid.jpg);

Answer 2

我认为你没有写错了

但最好使用body而不是html。

解释为何使用正文

它允许您在该body标签的顶部使用叠加层。就像身体上的网格背景和侧面的阴影一样。但两者都是正确的。取决于你想要做什么。

如果您不重复背景，您的图片可能不会使用整个页面，那么您应该使用html标签。但在这种情况下，由于重复，它会提供相同的解决方案。

SO replay：tnx to attronics

解释您的“错误”

如果您的图片位于与html页面不同的文件夹中（应该是这种情况）。 您应该使用..作为css文件的相对路径。

如果没有..，则意味着您将在与html页面相同的文件夹中查找该图像。

body{
  background-image:url(../images/background-grid.jpg);
  background-repeat:repeat;
}

这是一个提供一些Basics of CSS的网站。虽然没有检查来源。

Answer 3

可能是您的文件夹结构，请尝试

html
{
background-image:url(../images/background-grid.jpg);
background-repeat:repeat;
}

Answer 4

当我们有这些文件夹时

css
img
and index.html

当我们在称为内部 css 的索引页的样式标签中编写 css 时，它可以正常工作，但是当我们在 css 文件夹中的 styles.css 中正确编写 css 时，背景 img 不起作用。

因为您在文件夹中移动并且背景 img 的路径不起作用。所以你必须这样写：

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

然后它就会正常工作

Answer 5

..这意味着升级一级。

所以，如果您的文件夹结构是这样的：

image/
     background.png
css/
    stylesheet.css

然后你的css规则应该是这样的：

html {
background-image: url('../image/background.png');
}

如果您的文件夹结构如下：

style/
     image/
           bgr/
               background.png
     css/
         deeper/
               stylesheet.css

然后，将图像目录上升到两个级别，如下所示：

 html {
    background-image: url('../../image/bgr/background.png');
 }

等等。只需将..加上后跟斜杠/。