How to refer to static files in my css files?

Question

I have a reference inside my CSS file that refers to a static image:

#logo {   background: url('/static/logo.png') } 

This works just fine on my dev machine but not on my production environment since the url should be static.mydomain.com/logo.png. How do I dynamically change the css file according to the STATIC_URL in my settings file?

Answer 1

Use a relative path. Relative to the folder where the css file reside

Answer 2

You can move any CSS that contains static file paths to inline CSS, contained in the template.

i.e.

<div style="background: url('{% static 'logo.png' %}')"></div> 

The catch here is that it won't work for @media queries, you'd need to put those in a block, e.g.

<style>     @media (min-width: 1200px){        background: url('{% static 'logo.png' %}');     } </style>