Django css background-image

Question

My css file is working but i can't add bacgorund image. I try 3 way but don't work.

This is my style.css

.first-info{
    width: 100%;
    height: 300px;
    background-image: url( "{% static 'img/bg.jpg' %}");
}

This is my base.html ( img is working)

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{% block title %}VPW{% endblock %}</title>



    <link href="{% static 'css/style.css' %}" rel="stylesheet">
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
    <link href="{% static 'css/font-awesome.css' %}" rel="stylesheet">
    <script href="{% static 'js/bootstrap.js' %}"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
    <div class="row head">
        <div class="col-md-12">
            <div class="col-md-4">
            </div>
            <div class="col-md-4 logo">
                <img src="{% static 'img/logo1.png' %}">
            </div>
            <div class="col-md-4">
            </div>
        </div>
    </div>
</div>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>

And this is my main.html where i have class first-info.

{% extends "shop/base.html" %}
{% load static %}

{% block title %}VPW{% endblock %}

{% block content %}
    <div class="container-fluid">
    <div class="row first-info">
        <div class="col-md-4">
            <div class="box">
                Lorem Ipsum 
            </div>
        </div>
        <div class="col-md-4">
            <div class="box">

            </div>
        </div>
        <div class="col-md-4">
            <div class="box">

            </div>
        </div>
    </div>
    </div>

{% endblock %}

I try change in css background-image: url( "{% static 'img/bg.jpg' %}"); to background-image: url( "img/bg.jpg"); but don't work it

Possible duplicate of [Why is background:url in CSS not working with Django?](http://stackoverflow.com/questions/8023282/why-is-backgroundurl-in-css-not-working-with-django) — Alexander Tyapkov, Feb 04 '17 at 21:48

score 17 · Accepted Answer · answered Feb 04 '17 at 21:49

This is the expected behaviour. Django templating engine populates all the variables while rendering the html template. It will not populate values in your css file which is included in your html.

Your base.html because {% static 'img/logo1.png' %} is replaced into something like /static/img/logo1.png and browser is able to find the image, loads it and renders it.

If you want to make your background-image dynamic you can either .

You can add css class either directly in template i.e.

{% extends "shop/base.html" %}
{% load static %}

{% block title %}VPW{% endblock %}
 <style>
.first-info{
    width: 100%;
    height: 300px;
    background-image: url( "{% static 'img/bg.jpg' %}");
}
</style>
{% block content %}
    <div class="container-fluid">
    <div class="row first-info">
        <div class="col-md-4">
            <div class="box">
                Lorem Ipsum 
            </div>
        </div>
        <div class="col-md-4">
            <div class="box">

            </div>
        </div>
        <div class="col-md-4">
            <div class="box">

            </div>
        </div>
    </div>
    </div>

{% endblock %}

Or use a inline css directly in your html tag.

<div class="row first-info" style="background-image: url({% static 'img/bg.jpg' %})" >

Or Just hardcode the complete path in your css file. But it removes the dynamic behaviour i.e. your static path. I am assuming it is just /static/

.first-info{
    width: 100%;
    height: 300px;
    background-image: url( '/static/img/bg.jpg' );
}

score 2 · Answer 2 · answered Feb 04 '17 at 21:50

2

Try this:

background-image:url('{{ STATIC_URL }}/img/bg.jpg');

answered Feb 04 '17 at 21:50

Rich

3,156
3
19
29

score 2 · Answer 3 · answered Mar 04 '18 at 05:02

Late answer, but I wanted to share this with someone trying to dynamically load a background image. My example is rendering a database request generated in views.py. The request contains three elements: background.photo, background.title and background.body. Although not necessary, I wanted to apply opacity to the photo; however, using opacity property applies the effect to all children of the element in the DOM, so I used rgba to isolate the effect to the photo. The text is overlaid without being affected by the opacity of the photo. To make the text stand out, I used a horizontal gradient to darken the photo on the left.

    {% extends 'base_layout.html' %}

{% block content %}
<div class="background-image" style="background: url({{ background.photo.url }} ) no-repeat; background-size: 100%;">
    <div class="container">
        <h2 class="title-text">{{ background.title }}</h2>
        <p class="body-text">{{ background.body }}</p>
    </div>
</div>
{% endblock %}

And the css:

.container{
    background: linear-gradient(to right, rgba(0,0,0,1), rgba(255,255,255,0));
}

.background-image{
    margin: 1em;
    border-style: solid;
    border-width: 1px;
    border-color: #ff0080;
}

.title-text{
    font-family: serif;
    color: #ff0080;
    margin: 0;
    padding: .5em 1em;
}

.body-text{
    font-family: serif;
    color: #ff0080;
    margin: 0;
    padding: 1.5em 4em;
}

score 0 · Answer 4 · answered Feb 04 '17 at 21:45

0

Django is not processing .css file includes just renders html templates.

Your CSS is static file and url should there be included through processing of some kind of management command if you want it to be extensible.

Othewise just use path of url

answered Feb 04 '17 at 21:45

iklinac

14,944
4
28
30

Can you explain it to me more – Krystian Kazimierczak Feb 04 '17 at 21:54
For instance https://github.com/andreyfedoseev/django-static-precompiler – iklinac Feb 04 '17 at 22:49

score 0 · Answer 5 · edited May 24 '20 at 05:26

0

Just replace in static with '..'. It will solve:

background:url('../images/Course.jpg');

edited May 24 '20 at 05:26

Nidhin Bose J.

1,092
15
28

answered May 24 '20 at 02:21

Prashan Basantia

19
2

score 0 · Answer 6 · edited May 29 '20 at 20:00

0

Images must be in static/app/images/ and .css files must be located in static/app/content/.

Further in the .css file write like this:

#home {
  background: url(../images/1.jpg);
}

edited May 29 '20 at 20:00

ysf

4,634
3
27
29

answered May 29 '20 at 19:22

Buubleek

1

score 0 · Answer 7 · answered Jul 04 '20 at 14:04

0

This just worked for me:

<style="background-image: url({% static 'images/cover.jpg' %})">

Source: https://simpleit.rocks/python/django/call-static-templatetag-for-background-image-in-css/

answered Jul 04 '20 at 14:04

cheznead

2,589
7
29
50

score 0 · Answer 8 · answered Sep 19 '20 at 21:32

0

.bgded{
      background-image: url( "{% static 'images/ur.jpg' %}");
  }
  .wrapper {
  display: grid;
}

Add this

answered Sep 19 '20 at 21:32

Rucha Murugkar

11
1

Django css background-image

8 Answers8