How to use background image in css files with Django

Question

I would like to use an image file as a background image in Django . But I dont know how. Firstly, I read this and tried to write how this is done in the css file.

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

But that will 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; } 

also do not work.

How do you usually write a css file when using a background image in css files? Could you give me some advice?

 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 likely, this will work. Use "/ static /" in front of the image URL, and then try them. Thanks

Answer 2

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

In the settings.py file, specify 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' } 

Answer 3

For some reason, which I cannot explain, the accepted answer did not work for me. (I wanted to use the picture as a cover for the whole body).

However, here is an alternative that worked for me for anyone who might be helpful to someone who meets.

---

In the CSS file, which is in the static files directory, I wrote the following:

CSS:

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

You do not need to include *'{% load static %}'* in your CSS file.

HTML:

1. enable {%load static%} at the top

2. create a style link as shown below.

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

Answer 4

In case someone is looking for another way to solve this problem, you may want to link the image from your server or from any image hosting service that you have access to. Here is how I solved it:

1. Upload the image to the image hosting site or to your server (try Drive / Dropbox)
2. Right-click and open the image in a new tab to access the image URL.
3. Copy the URL of the image with the extension (.jpeg, .png) and paste it into the HTML document.

Here is an example:

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