cssdjangobackground-image

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


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


Solution

  • 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