Why is background:url in CSS not working with Djan

Question

I have the following CSS code for my navigation bar:

#footer-navigation {
  background: #1841c8 url('../images/nav_background.gif');
  height: 40px;
  padding: 0 0 0 20px;
}

However, when I launch my local development server, it gives me the following even though the image exists in that location:

"GET /images/nav_background.gif HTTP/1.1" 404 1795

I am running Django 1.3.1, and I am using django.views.static.serve.

Answer 1

"GET /images/nav_background.gif HTTP/1.1" 404 1795

The image you want to use is not found. I suggest you do follow these steps:

You can try these steps:

1. open your settings.py and

   • add this at the first line of your file:

     import os.path
     

   • change your STATIC_ROOT's value to:

     STATIC_ROOT = os.path.join(PROJECT_DIR, 'static/')
     

   • change your STATIC_URL's value to:

     STATIC_URL = '/static/'
     

2. create a folder named "static" in your project root.

3. create a folder for your static files like css, javascript and etc. I recommend you use a different folder for different types of files.

4. open the urls.py of your project

   • add this to your imports: import settings

   • add this to the url patterns:

     (r'(?:.*?/)?(?P<path>(css|jquery|jscripts|images)/.+)$', 'django.views.static.serve', {'document_root': settings.STATIC_ROOT }),
     

   NOTE: In this example, there are folders named css, jquery, jscripts and images inside my static folder.

5. In your template add this:

for css files: (in this example, default.css is the name of the css file)

<link href="/{{ STATIC_ROOT }}css/default.css" rel="stylesheet" type="text/css" media="all" />

for javascript:

<script type="text/javascript" src="/{{ STATIC_ROOT }}jquery/jquery.js"></script>

then change your code to this:

#footer-navigation {
background: #1841c8 url(images/nav_background.gif);
height: 40px;
padding: 0 0 0 20px;
                   }

Answer 2

try setting MEDIA_ROOT in your settings to where the image lives and then use

{{ MEDIA_URL }}nav_background.gif

EDIT:

Jakub Gocławski is right. It would appear your issue is that the image does not exist where you think it exists. If you're still having a problem let us know what you get when you visit localhost:8000/< the path to the image > .