The way to use background-image in css files with Django
For some reasons, which I cannot explain the accepted answer did not worked out for me. (I wanted to use a picture as a cover image for the whole body).
However, here is the alternative that has worked for me for anyone that might be useful for someone that will come across.
In a css file, which is located in the static file directory, I have wrote the following:
CSS:
body {
background: url(../main/img/picture-name.jpg);
}
You do not have to include *'{% load static %}'*
in your css file.
HTML:
include
{%load static%}
at the topcreate a link href to style, as below.
<link href='{% static "/main/home.css" %}' rel='stylesheet' type='text/css'>
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
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'
}