Django CSS Background Image using STATIC_URL

Question

I just changed my storage backend to Amazon S3, and I realized that my background was not loading for my site. I looked and realized that in my CSS (SASS actually) I had specified the background URL (static/mysite/images/background.gif).

I am wondering how I should fix this problem. Of course I could just change it to my new static URL, but that seems like a bad practice. So i tried loading my background image, with {{ STATIC_URL }}, in my body HTML, but then it renders my background first, before the repeat: no-repeat; renders on my actual CSS, causing the background to repeat across the whole screen while the CSS loads. Anyway I don't like mixing my styles into my document.

So what is the best way to provide a relative path for a background image in Django? Should I set up my CSS as a template, and direct to it through a view? That also seems messy.

Or should I just forget about making it static_url agnostic, and just hard code the thing in my CSS?

Answer 1

Django compressor!

It lets you render snippets of CSS directly inside your template that are ultimately combined into a single file OR you can even specify options to enable parsing of your CSS files with django's template engine and context: http://django_compressor.readthedocs.org/en/latest/settings/#django.conf.settings.COMPRESS_CSS_FILTERS

It's amazing and worth the trouble as you don't need to think about performance when managing CSS.