Способ использования фонового изображения в css файлах с Django

Я хотел бы использовать файл изображения в качестве фонового изображения на Django. Но я не знаю как. Во-первых, я прочитал this и попытался написать, как это делается в файле css.

#third{
    background: url("img/sample.jpeg") 50% 0 no-repeat fixed;
    color: white;
    height: 650px;
    padding: 100px 0 0 0;   
}

Но это не сработает.

{% load staticfiles %}
#third{
    background: url({% static "img/sample.jpeg" %}) 50% 0 no-repeat fixed;
}

и

#third{
    background: url("../img/sample.jpeg") 50% 0 no-repeat fixed;
}

тоже не работают.

Как вы обычно пишете файл css при использовании фонового изображения в файлах css? Не могли бы вы дать мне несколько советов?

C:\~~~~~~> dir hello\static\img
2016/09/28  19:56             2,123 logo.png
2016/09/24  14:53           104,825 sample.jpeg


C:\~~~~~~> dir hello\static\css
2016/09/29  20:27             1,577 site.css


C:\~~~~~~> more lemon\settings.py
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = os.path.join(PROJECT_ROOT, 'staticfiles')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(PROJECT_ROOT, 'static'),
)


C:\~~~~~~> more hello\templates\base.html
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static "css/site.css" %}" />

версия Django: 1.9.2

Ответы

Ответ 1

Используйте это:

    #third{
     background: url("/static/img/sample.jpeg") 50% 0 no-repeat fixed;
     color: white;
     height: 650px;
     padding: 100px 0 0 0;   
     }

Скорее всего, это будет работать. Используйте "/static/" перед URL-адресом изображения, а затем попробуйте их. Благодаря

Ответ 2

Убедитесь, что django.contrib.staticfiles включен в ваш INSTALLED_APPS.

В файле settings.py укажите STATIC_URL: STATIC_URL = '/static/'

     {% load static %}
     <img src="{% static "my_app/example.jpg" %}" alt="My image"/>

или

     #third{
          background: url('{{ STATIC_URL }}my_app/example.jpg'
     }

Ответ 3

По некоторым причинам, которые я не могу объяснить, принятый ответ не сработал для меня. (Я хотел использовать картинку в качестве обложки для всего тела).

Тем не менее, вот альтернатива, которая сработала для меня для любого, кто может быть полезен для кого-то, кто встретит.

В файле CSS, который находится в каталоге статических файлов, я написал следующее:

CSS:

body {
  background: url(../main/img/picture-name.jpg); 
}

Вам не нужно включать *'{% load static %}'* в ваш CSS файл.

HTML:

  1. включить {%load static%} вверху

  2. создайте ссылку на стиль, как показано ниже.

    <link href='{% static "/main/home.css" %}' rel='stylesheet' type='text/css'>

Ответ 4

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

  1. Загрузите изображение на сайт размещения изображений или на свой сервер (попробуйте Drive/Dropbox)
  2. Щелкните правой кнопкой мыши и откройте изображение на новой вкладке, чтобы получить доступ к URL-адресу изображения.
  3. Скопируйте URL-адрес изображения с расширением (.jpeg,.png) и вставьте его в документ HTML.

Вот пример:

https://images.your-host.com/photos/image-path-here.jpeg