Adding image as a background for a django template

Question

I have checked a links for how to set an image as background for a div. I have tried various ways. But still am going wrong somewhere and would need some guidance...

Below is my directory structure:

frontend
    /frontend (django project)
        settings.py
        .
        .
    /webApp (django app)
        /templates
            /static
                img1.jpg
            home.html

In my home.html I have the following line,

{% load static %}

<div style="background-image: url({% static "/img1.jpg"%}); height: 650px; width: 1920px;">

In settings.py I have,

STATIC_URL = '/static/'

But the image does not appear when the page is displayed. I get the following error.

"GET /static/img1.jpg HTTP/1.1" 404 1803

My directory structure was different and have searched a few questions before to fit my need. I still am getting confused with the urls and assigning url for the background image. Also i want it as a url and not as href to set the background-image. How do I go about this?

Possible duplicate of [Django -- Can't get static CSS files to load](http://stackoverflow.com/questions/7574759/django-cant-get-static-css-files-to-load) — Sayse, Aug 03 '16 at 10:52

score 1 · Answer 1 · answered Aug 03 '16 at 11:31

1

Try to specify STATICFILES_DIRS in settings.py

STATICFILES_DIRS = (
    "<absolute path to static folder>",
)

answered Aug 03 '16 at 11:31

Anna

523
3
8

After a lot of searches, finally it helped me. – keramat Aug 01 '18 at 14:50

score 0 · Answer 2 · edited Aug 03 '16 at 12:07

0

try add but with proper path:

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

edited Aug 03 '16 at 12:07

perror

7,071
16
58
85

answered Aug 03 '16 at 11:24

gargi258

829
1
10
16

It's yet giving 404 – nidHi Aug 03 '16 at 11:29
@nidHi How you define BASE_DIR variable? – Nick Aug 03 '16 at 11:36

score 0 · Answer 3 · answered Aug 03 '16 at 11:56

0

I made a few changes... I shifted the static folder to where my settings.py is present... And remove the / before img1.jpg in the html file... Finally it's working now...

answered Aug 03 '16 at 11:56

nidHi

833
3
10
21

Adding image as a background for a django template

3 Answers3