Why is background:url in CSS not working with Django?

Question

I have the following CSS code for my navigation bar:

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


        

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(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)

for javascript:

then change your code to this:

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