Django: css referencing media in static files (django dev / 1.3 / static files)

Question

Like any other user of django user I serve static files. I've chosen to use django-staticfiles to be ready for django 1.3 which will basically integrate it into the core.

My question is pretty simple really - this works great for pulling together multiple media sources and referencing them in a uniform way in django templates. However, I often use image backgrounds in Css like so:

#itemname { background-image: url('/path/to/image.png'); }

My question is simple - if I use absolute names, I have to hard code them. If I use relative names, moving to "subdirectory" urls messes up the resource location for these items and they can't be loaded.

So, how do I extend this solution to CSS? Said solution must avoid:

• Embedding css in html. I personally avoid this.
• Using hardcoded urls. This does not work very well because on my local setup I typically use 'localhost/project' with apache for testing (mod_wsgi) whereas I tend to use project.com for deployment.

Ideas?

Olin

Answer 1

You said you had trouble with relative paths, but I don't understand exactly what you meant.

I ran into the same issue, and I've used relative paths to solve it. The only thing to keep in mind is that when deploying the images need to (obviously) remain in the same path relative to the CSS files.

My setup in a nutshell:

Note I'm still using django-staticfiles with Django 1.2, but it should work similarly for Django 1.3

STATIC_URL = "/site_media/static/"
STATIC_ROOT = os.path.join(PROJECT_ROOT, "site_media", "static")
STATICFILES_DIRS = (
    os.path.join(PROJECT_ROOT, "static_media"),
)

Then I serve the CSS from {{ STATIC_URL }}css/style.css which references images at ../images/logo.png.

and my project looks like this:

project_dir
  ...
  stuff
  static_media
    ...
    css
    images

Let me know if you have any questions, and I'll clarify.

Inform

The bit I'm not sure about, now you've answered - are css background-image urls relative to the css file, or the url from which the page is being served? If the former, I'm sorted, because I can use exactly what you've outlined. – Olin

Just tested it out - relative seems to work in css. I'm happy with that. Have a tick! – Olin

@John, is PROJECT_ROOT also defined somewhere by you or it is automatically defined by the Django as your current Project root (where your manage.py is lying). If you define PROJECT_ROOT yourself you need to keep changing it based on whether it is in development environment or production environment (as the directory structure ) of both can be different – Commorancy

@David, I usually define PROJECT_ROOT as PROJECT_ROOT = os.path.abspath(os.path.dirname(__file__)) within settings.py, so that it doesn't need to be redefined as it moves around. – Inform

Awesome answer! Been googling for an hour before arriving here. – Lithotomy

Answer 2

Ok,

I don't know if there is something wrong with @John's solution but it didn't worked to me then I put this code on the CSS

{% load static %}
{% get_static_prefix as STATIC_PREFIX %}

and

<link rel="stylesheet" href="{{ STATIC_PREFIX }}css/main.css">

Hope it helps!

Erickaericksen

This means all of your stylesheed must be parsed as a template... think about caching them! – Teleutospore