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?

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.