Html Background Image

I'm using django and I'm trying to add a background image to my base.html, thus applying it to the rest of the site, but I've been having trouble.

Solution 1:

There are several things that can go wrong with static file serving on Django. Work your way through this checklist:

Not correctly installed

Firstly, in settings.py:

INSTALLED_APPS = (
    ...
    'django.contrib.staticfiles',
    ...
)

STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.StaticFilesStorage'

The STATICFILES_STORAGE setting dictates which backend the collectstatic function will use. In deployment, this setting could be changed so that collectstatic gathers the files together and sends them off to Amazon S3.

Misconfigured or missing route

Now in urls.py:

from django.conf.urls.static import static
from myapp import settings

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

This adds a route called 'static', which you should then refer to in every template where you wish to use static files:

{% load staticfiles %}

<img src="{% static 'path/to/my/image.jpg' %}" />

Files not found by collectstatic

If you're still having issues, your files may not be being found by the collectstatic command. This command follows certain rules in order to find your static files and then copy them to the location they are to be served from. There are a couple of backends available that tell it how to do this, and they're configured in settings.py:

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)

The AppDirectoriesFinder works like this: "Look through each one of the apps in INSTALLED_APPS, and if there's a folder in that app called 'static', copy it"

The FileSystemFinder: "Copy each of the directories listed in STATICFILES_DIRS"

Say you had been saving your static files to two different folders in your project: 'images' and 'audio'. The AppDirectoriesFinder can't find these, because they don't live in a folder called 'static'. The FileSystemFinder can, but only if you use STATICFILES_DIRS to tell it exactly where it should look:

# settings.py

# Set PROJECT_DIR to be the folder where settings.py lives:
PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))

STATICFILES_DIRS = (os.path.join(PROJECT_DIR, 'images'),
                    os.path.join(PROJECT_DIR, 'audio'),
                   )

You must use full paths for each directory in STATICFILES_DIRS, as I have done here.

STATIC_ROOT and STATIC_URL

Now you've now made sure your static files are discoverable, collectstatic will gather them up and copy them to STATIC_ROOT. Sticking with my example, I could add the following to my settings.py:

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

Now when I run collectstatic, it will first use the FileSystemFinder to locate my 'images' and 'audio' folders. It will copy these to the 'static' folder (STATIC_ROOT). Then the AppDirectoriesFinder will kick in, and look for 'static' folders in each of my INSTALLED_APPS. If I've installed Django Admin, for example, the AppDirectoriesFinder will find the static files in that app and copy them over.

Now all the files are located in a folder called 'static' in my project - if I open this folder I should expect to see copies of my 'images' and 'audio' directories, and also an 'admin' directory if I had Django Admin installed.

Solution 2:

Never-ending saga with the django static setup. How many times have I been through that. Here is (almost) how I do it.

# settings.py
MEDIA_ROOT = path.join(PROJECT_DIR, 'media')
MEDIA_URL = '/media/'
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(PROJECT_DIR, 'assets'),
)


# urls.py
from django.conf import settings

urlpatterns = patterns('',
    ... # normal patterns here
)

if settings.DEBUG:
    urlpatterns += patterns('',
        url(r'^static/(?P<path>.*)$', 'django.views.static.serve',
            {'document_root': settings.STATIC_ROOT, 'show_indexes': True}),
        url(r'^media/(?P<path>.*)$', 'django.views.static.serve',
            {'document_root': settings.MEDIA_ROOT, 'show_indexes': True}),
    )

During development keep your static files in the assets directory only. And don't do collectstatic in development. Just in case, I keep the /static entry in my .gitignore file. Launch collectstatic in production only, than the content of your assets directory will be copied to static and served via nginx (or other service).

The difference is that I use a little bit different project structure (other directories) and different settings files (development, staging, production) but you need to figure it out by yourself, trust me.

Share