CODEWITHSUNDEEP
cssdjango
segunolalive
segunolalive

Reputation: 175

Why isn't django isn't parsing and replacing the template tags in my css file?

This is a snippet from my settings file

STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static_cdn')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'media_cdn')

I also have a folder in my base directory titled static within which is another named css where my blog.css styles reside.

My html file is linked to my css file using:

{% load staticfiles %}
<head>
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>

Media files(pictures) have no problems. The command line shows that the static files are being collected to the static_cdn and 

`/static/css/blog.css HTTP/1.1" 200 39`

while I presume means that it django has no problem locating my css file however the styles aren't showing up in the project.

Finally, a block from my css file, well the only block thus far:

body: {
  background: url("{% static 'images/jumbotron.jpg' %}");

}

Can anyone please point me in the right direction? Thank you

Upvotes: 2

Views: 364

Answers (3)

Arash Hatami
Arash Hatami

Reputation: 5551

remove : in your CSS file and use normal url address

body{
    background: url('../images/jumbotron.jpg');
    direction:rtl;
}

if your css file and images folder in the same directory use

`images/jumbotron.jpg`

else you should use

`../images/jumbotron.jpg`

also check your address and file names for small mistakes like wrong format, uppercase, etc.

To verify which path you should use as relative url, confirm that you can open the image in your browser using the full expected url. 

http://example.com/static/images/jumbotron.jpg

The image url must be relative to the path of the css url. Looking at your question, the css in a folder called css, and the images are in images. If this is the css url:

http://example.com/static/css/blog.css?

Then the relative url should be "../images/jumbotron.jpg"

Upvotes: 2

doru
doru

Reputation: 9110

You should use the normal way to use a static image:

body {
   background: url('images/jumbotron.jpg');
}

See this example from the docs for more info on folder structure.

Upvotes: 0

H&#229;ken Lid
H&#229;ken Lid

Reputation: 23064

Putting this in you css file will not work as you expect.

// /static/css/blog.css 

body: {
  background: url("{% static 'images/jumbotron.jpg' %}");
}

To fix this specific problem, follow the advice in the other answers. I'll just try to explain why your current approach is not working.

The django template engine doesn't parse your css files unless you explicitly tells it to do so. Templates are very useful for processing html where the content will often change from one request to the next.

Css files is a total different case. It's better to build them once, using a stylesheet processor like Sass or Stylus, and then serve the same css file to every visitor.

Or you can just write plain old css by hand, which is better for small projects. Learning css preprocessing is a project in itself.

In theory, you could use a django view to serve generated css files dynamically on every request, but that just seems like a waste of processing cycles.

If you really want to use django template tags in your css, it's better to use inline stylesheets in the head of your html page. You can put the styling that is common for all pages in a css file, and just have the custom dynamic stuff in the head. Something like this would probably work.

{% load staticfiles %}
<head>
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
<style>
    body: { background: url("{% static 'images/jumbotron.jpg' %}"):}
</style>
</head>

This could be used for myspace-style pages where you want to give the users the ability to vandalize their own pages with custom fonts and background images of their own choice.

Upvotes: 4

Related Questions