The way to use background-image in css files with Django

Question

I'd like to use an image file as a background-image on Django. But I do not know how. First, I read this and tried to write like following this in a css file.

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

But this does not work.

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

and

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

don't work, too.

How do you usually write css file when you use background-image on css files? Would you please give me some advices?

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 version: 1.9.2

Answer 1

Use this:

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

Most probably This will work.Use "/static/" before your image URL and then try them. Thanks

Answer 2

Make sure that django.contrib.staticfiles is included in your INSTALLED_APPS.

In you settings.py file define STATIC_URL: STATIC_URL = '/static/'

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

or

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