Can't get static URL to work in CSS

Question

I'm having trouble adding a static file to my CSS to use it as a background image for my site. The static url does work because I've tested it in the HTML ,but for some reason it doesn't work in the CSS.

HTML:

{% extends 'base.html' %}

{% block body %}
    <div class ='splash'>
        <a href="{{ STATIC_URL }}background.JPG"> try me </a>
        </div>

{% endblock body %}

CSS:

    .splash{
    background-image: url("{{ STATIC_URL }}background.JPG");

    background-size: 100%;
    height: 1000px;


    }

DOES NOT WORK

TEST CSS:

.splash{
    background-image: url("http://127.0.0.1:8000/static/background.JPG");

    background-size: 100%;
    height: 1000px;


}

DOES WORK

..any ideas how make the static URL work?

Answer 1

Django won't process the css file. In a production server, it is likely to be just served by nginx or apache for example.

Use relative path instead.

If your css file is on the same dir as your background image, just put it like this:

.splash {
    background-image: url("background.JPG");
}

Or you may use the full url:

.splash {
    background-image: url("/static/background.JPG");
}

If you have a dir structure like this:

|static
|--css
|--img

You can specify it like this:

.splash {
    background-image: url("../img/background.JPG");
}