CODEWITHSUNDEEP
cssdjango
hokatvcu
hokatvcu

Reputation: 239

Can't get static URL to work in CSS

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?

Upvotes: 1

Views: 155

Answers (1)

Vitor Freitas
Vitor Freitas

Reputation: 3610

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");
}

Upvotes: 2

Related Questions