Как указать путь к изображению в "main. css" в Django? - PullRequest
Новая
       4

Как указать путь к изображению в "main. css" в Django?

0 голосов
/ 27 мая 2020

Я пытаюсь создать приложение на Django, я создал домашнюю страницу, статические пути, которые я установил для проекта, работают нормально. Я могу визуализировать HTML ( index. html) связанный CSS ( main. css) и изображения безупречно, за исключением изображения «banner.jpg».

Для других изображений я установил путь, как мы обычно делаем в Django, 

<img src="{% static 'images/image1.jpg' %}" alt="" />

Для баннера домашней страницы я попытался установить путь в CSS что-то вроде приведенного ниже.

main. css

#banner {
        background-color: #e5474b;
        color: #f2a3a5;
        padding: 13em 0 11em 0;
        background-color: #0c0c0c;
        background-image: url("../images/banner.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 15% left;
        text-align: left;
        position: relative;
        z-index: 9999;
    }

или 

#banner {
    background-color: #e5474b;
    color: #f2a3a5;
    padding: 13em 0 11em 0;
    background-color: #0c0c0c;
    background-image: url("{% static 'images/banner.jpg' %}");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 15% left;
    text-align: left;
    position: relative;
    z-index: 9999;
}

, но оба метода никогда не работают, однако когда Я установил путь "url (" ../ images / banner.jpg ")" без Django, он отлично работает и отображает изображение в фоновом режиме. Где мне внести изменения, чтобы исправить эту проблему?

Спасибо.

1 Ответ

0 голосов
/ 27 мая 2020

После борьбы и просмотра комментариев я могу найти быстрое решение, которое идеально подходит для меня. 

<head>
  ...
  <style>
    #banner {
      background-image: url("{% static 'images/banner.jpg' %}");
    }
  </style>
 ...
</head>

Я просто пропустил раздел фонового изображения от «main. css» до «index. html» под заголовком, и он отлично работает.

...