Django serving static images defined inside CSS file

Question

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!

Chris Hawkes · Accepted Answer · 2014-09-06 21:59:41Z

1

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

answered Sep 6, 2014 at 21:59

Chris Hawkes

12.5k6 gold badges60 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Django serving static images defined inside CSS file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related