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.
"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:
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/'
create a folder named "static" in your project root.
open the urls.py of your project
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.
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;
}
'django.views.static.serve' is not allowed. Instead do: from django import views as django_views and url(r'(?:.*?/)?(?P<path>(css|jquery|jscripts|images)/.+)$', django_views.static.serve, {'document_root': settings.STATIC_ROOT }),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 > .
MEDIA_ROOT won't work in a CSS file.