title: background image in css style from static files with django
body: <p>I used this <a href="https://templated.co/hielo" rel="noreferrer">template</a> to create a home page in a django project, however I can't have the background image displayed correctly (bg.jpg) </p>
  
  <p>The background image is used as foollows in the css file : </p>
  
  <pre><code>.wrapper.style3 {
      background-color: #000;
      color: #bfbfbf;
      background-image: url(/media/usr/path_to_project/project_name/home/static/images/bg.jpg);
      background-size: cover;
      background-attachment: fixed;
      background-position: center;
      position: relative;
  }
  </code></pre>
  
  <p>I read these topics </p>
  
  <ul>
  <li><p><a href="https://stackoverflow.com/questions/36170310/how-to-add-background-image-in-css">How to add background image in css?</a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/7359479/how-to-use-background-image-in-css">How to use background image in CSS?</a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/17956205/use-static-image-in-css-django">use static image in css, django</a> </p></li>
  <li><p><a href="https://stackoverflow.com/questions/27112050/how-do-i-put-a-background-image-on-the-body-in-css-with-django-using-static">How do I put a background image on the body in css with django using static?</a></p></li>
  </ul>
  
  <p>and tried all of the solutions but non of them seems to work.</p>
  
  <p>My project tree is like </p>
  
  <pre><code>project_name
  - home
  - static
  --home
  ---style.css
  --images
  ---bg.jpg
  - templates
  -- home
  ---base.html
  ---home_template.html
  </code></pre>
  
  <p>in the style.css file I tried the following</p>
  
  <pre><code>background-image: url(/media/usr/path_to_project/project_name/home/static/images/bg.jpg);
  
  background-image: url("/media/usr/path_to_project/project_name/home/static/images/bg.jpg");
  
  background-image: url(../images/bg.jpg);
  
  background-image: url("../images/bg.jpg");
  
  background-image: url("{% static 'images.bg.jpg' %});
  </code></pre>
  
  <p>in my base.html template I have :</p>
  
  <pre><code>{% load static %}
  &lt;link rel="stylesheet" type="text/css" href="{% static 'home/style.css' %}"/&gt;
  </code></pre>
  
  <p>and in my home_template.html I have</p>
  
  <pre><code>{% block body %}
  {% load staticfiles %}
  
          &lt;section id="two" class="wrapper style3"&gt;
              &lt;div class="inner"&gt;
                  &lt;header class="align-center"&gt;
                      &lt;p&gt;Nam vel ante sit amet libero scelerisque facilisis eleifend vitae urna&lt;/p&gt;
                      &lt;h2&gt;Morbi maximus justo&lt;/h2&gt;
                  &lt;/header&gt;
              &lt;/div&gt;
          &lt;/section&gt;
  
  {% endblock %}
  </code></pre>
  
  <p>The strange thing is that I have other images in my static/images directory that are displayed fine in the template with inline styling such as :</p>
  
  <pre><code>&lt;div class="image fit"&gt;
  &lt;img src="{% static 'images/pic03.jpg' %}" alt="" /&gt;
  &lt;/div&gt;
  </code></pre>