Django项目中CSS导入背景图片失败问题求助

1. 修正CSS中的路径写法 #

CSS文件不会被Django模板引擎解析，因此不能在CSS里使用{% static %}标签。根据你的目录结构，style.css位于static/CSS/，图片在static/Image/，使用相对路径即可。另外注意background-image属性不能直接混写no-repeat等属性，需分开写或用正确的简写语法：

修正后的CSS代码（两种写法任选其一）：

写法一：拆分属性

#home{
    background-size: cover;
    display: flex;
    flex-direction: column;
    padding: 3px 200px;
    height: 921px;
    justify-content: center;
    align-items: center;
    
}
#home::before {
    content: "";
    position: absolute;
    background-image: url("../Image/Bg2.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    top: 87px;
    left: 0;
    height:840px;
    width: 100%;
    z-index: -1;
    opacity: 0.78; 
}

写法二：使用background简写

#home{
    background-size: cover;
    display: flex;
    flex-direction: column;
    padding: 3px 200px;
    height: 921px;
    justify-content: center;
    align-items: center;
    
}
#home::before {
    content: "";
    position: absolute;
    background: url("../Image/Bg2.jpg") no-repeat center center/cover;
    top: 87px;
    left: 0;
    height:840px;
    width: 100%;
    z-index: -1;
    opacity: 0.78; 
}

2. 检查Django静态文件配置 #

确保项目根目录的settings.py里正确配置静态文件路径：

import os

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'App1/static'),
]

开发环境下Django会自动从STATICFILES_DIRS指定的目录加载静态文件，无需额外操作；生产环境需运行python manage.py collectstatic收集静态文件。

3. 确认HTML正确引入CSS #

在index.html开头加载静态文件标签，并正确引入CSS：

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'CSS/style.css' %}">

内容的提问来源于stack exchange，提问作者SatyamFireSight