Фоновое изображение не хочет загружаться в css

Я создаю сайт на Django. Я скачал в интернете html-шаблон домашней страницы, который я хочу улучшить и использовать для своего сайта. поскольку он был разработан, он поставляется с CSS-файлом. теперь, когда я пытаюсь сделать улучшения, а именно добавить фоновое изображение в один из элементов, он отказывается это делать. Другие элементы реагируют на стиль CSS, но фоновое изображение тоже отказывается. Поскольку я использую Django, я должен был установить статические файлы и "собрать статические", что я и сделал, но когда я устанавливаю эти картинки в качестве фонового изображения в моем 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;
 }
 }

Я перепробовал все, но он отказывается приобретать. Заранее спасибо.

Загрузите статический или непустой div

Не зная, какой еще код у вас есть, я могу только предположить, что возможно вы забыли загрузить статические файлы, включив это в верхней части вашего html файла:

{% load static %}

Во-вторых, пока div не заполнен чем-то, он не имеет размеров, поэтому изображение также не будет занимать места.

Вернуться на верх