css 不想加载背景图片

Question

我正在用 Django 创建一个网站。我在互联网上下载了一个 html 主页模板设计，我想对其进行改进并将其用于我的网站。由于它的设计带有一个 CSS 文件。现在，当我尝试进行改进时，专门在其中一个元素中添加背景图像。它拒绝这样做。其他元素响应 CSS 样式，但背景图像也拒绝。因为我使用的是 Django，所以我必须设置静态文件和 'collect static'，但当我将这些图片设置为我的 CSS 中的背景图片时，它拒绝了。这是 html 文件 & css.

html

<!DOCTYPE html>
<!-- Created by CodingLab |www.youtube.com/c/CodingLabYT-->
<html lang="en" dir="ltr">
 <head>
  <meta charset="UTF-8">
  <title> Home </title>
  <link rel="stylesheet" href="{% static 'style.css' %}">
  <!-- Boxicons CDN Link -->
  <link href= 
 'https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' 
  rel='stylesheet'>
 <meta name="viewport" content="width=device-width, initial- 
  scale=1.0">
</head>

<section class="home-section">
  <div class="main" >
    
  </div>

class="main" 也是我尝试添加背景图像的地方。

CSS

.home-section .main{
  background-image: url('https://www.pexels.com/photo/singer- 
  singing-on-stage-beside-guitar-player-and-bass-player- 
  167636/');
  padding: auto;
  margin: auto;
  background-size: 50pc;
 }
@media (max-width: 700px) {
.sidebar li .tooltip{
display: none;
 }
 }

我什么都试过了，还是不行。提前致谢。

Answer 1

加载静态或有非空div

不知道你还有多少代码，我只能猜测你可能忘记加载静态文件，方法是将其包含在 html 文件的顶部：

{% load static %}

其次，在 div 被填充之前，它没有尺寸，所以图像也不会占据 space。

css 不想加载背景图片

Background image does not want to load in css

html

css

django

css-selectors

flexbox