1

I unable to display image in Django. It is loading images which is in the img tag defined in the html file just fine. But the image defined in the css file is not loading and displaying on the page.

I have configured django for static files. And other images are loading properly which is in the static folder. I have a static folder and inside it I have another folder of css which contains all other css files. HTML files are in the templates folder.

css file

`

/* Cover Section Styling */
#cover{
    background-image: url(static/img/random5.jpg);
    display:flex ;
    height: 70vh;
    background-position: center;
    align-items:center ;
    justify-content: center;
}

`

setting.py file

`


STATIC_URL = '/static/'


# Added manually
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static") 
]

`

Farah
  • 11
  • 4
  • first in your template add `{% load static %}` at the top and change this `background-image: url(static/img/random5.jpg);` to `background-image: url("{% static 'img/random5.jpg' %}");` – Thierno Amadou Sow Jan 03 '23 at 18:05

1 Answers1

0

By your description of the file structure I'd say the relative path from your css file to your background-image would look more like background-image: url('../img/random5.jpg');

The Django variable {% static %} is only working inside your templates folder, not in static files. Details are already described in this answer.

p_walter
  • 11
  • 2