CODEWITHSUNDEEP
cssdjango
Belethia
Belethia

Reputation: 368

Django serving static images defined inside CSS file

I'm running django 1.5.1 and I'm trying to serve some static images defined inside my css. I have no problem serving the css itself and static images defined in the templates. Also styles defined in the css are applied correctly to my template. The only things that don't work are the images defined inside the css.

Here is a sample of my css file defining a class that includes a static image:

.outer_banner
{
    background:url(/images/banner2.png) bottom center no-repeat;
    padding:300px 0;
}

Here is an example of my template using the class defined in the css:

{% load staticfiles %}
<!DOCTYPE html>
<html>
    <head>

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

        <!-- more header stuff here -->
    </head>

<body>

    <section class="outer_banner">

        <!-- other stuff here -->

    </section>    
</body>
</html>

Thanks!

Upvotes: 0

Views: 115

Answers (1)

Chris Hawkes
Chris Hawkes

Reputation: 12430

Well you're problem has nothing to do with Django and that's a good thing. It's simply the path to your images is not being served correctly by your CSS file.

If you have something like this folder structure;

static
    images
        banner2.png
    css
        main.css
    js

In order for your css to find your image assuming that is the folder structure you need to move back one folder so the url to your image inside your css file would look like this; 

.outer_banner
{
    background:url(../images/banner2.png) bottom center no-repeat;
    padding:300px 0;
}

Upvotes: 1

Related Questions