Question

我正在尝试将图片加载到我的页面并将其设置为我的背景，下面是我正在使用的css和html。 CSS页面似乎加载，因为我的测试字体和背景颜色显示，但无论出于何种原因我的背景图像不显示。

我使用Django作为我的网络框架。

感谢帮助！

HTML：

<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">

<head>
    <title>Test</title>
    <meta charset="utf-8" />

 <link rel="stylesheet" href="{% static 'personal/css/frontpagebackground.css' %}" type = "text/css"/>
</head>

<body>


<p>This is a test</p>


</body>
</html>

CSS：

body
{
background-image:url(personal/static/personal/img/home.jpg) no-repeat;
background-repeat:no-repeat;
background-size:100%;
background-color: green;
min-height: 100%;
}


p {
    font-style: italic;
    color: red;

}

Answer 1

您使用了background-image，因此no-repeat实际上并未正常工作。请尝试将no-repeat添加为background-repeat: no-repeat;。

 background-image: url('image-url-here.png');
 background-repeat: no-repeat;

Answer 2

我和django有这样的问题，主要是因为我的{％static％}位置让我很困惑。我认为这是一个非css问题，也是一个路径问题。

它帮助我使用开发控制台检查资源失败加载错误。它将吐出机器正在寻找的路径，并且可能与您指定的路径不同。

即。是您的css文件位于

personal/static/personal/img/home.jpg

相对于你的css文件？您可能只需要备份目录，即

../personal/static/personal/img/home.jpg

无论哪种方式，控制台都应该为您提供路径，并使用它来确定CSS文件挖掘图像的位置。

CSS背景图像无法加载

2 个答案: