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? — Alexander Tyapkov
– Alexander Tyapkov, Commented Feb 4, 2017 at 21:48

Bipul Jain · Accepted Answer · 2017-02-04 21:49:49Z

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' );
}

Rich · Accepted Answer · 2017-02-04 21:50:44Z

2

Try this:

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

answered Feb 4, 2017 at 21:50

Rich

3,3463 gold badges23 silver badges30 bronze badges

Comments

BusterT · Accepted Answer · 2018-03-04 05:02:11Z

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;
}

cheznead · Accepted Answer · 2020-07-04 14:04:22Z

1

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 4, 2020 at 14:04

cheznead

2,8297 gold badges32 silver badges57 bronze badges

1 Comment

Abayomi Olowu Over a year ago

this also worked for me after so many days of searching.

Rucha Murugkar · Accepted Answer · 2020-09-19 21:32:32Z

1

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

Add this

answered Sep 19, 2020 at 21:32

Rucha Murugkar

211 bronze badge

Comments

iklinac · Accepted Answer · 2017-02-04 21:45:35Z

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 4, 2017 at 21:45

iklinac

15.8k5 gold badges32 silver badges34 bronze badges

2 Comments

Krystian Kazimierczak Over a year ago

Can you explain it to me more

iklinac Over a year ago

For instance github.com/andreyfedoseev/django-static-precompiler

Nidhin Bose J. · Accepted Answer · 2020-05-24 05:26:28Z

0

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

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

edited May 24, 2020 at 5:26

Nidhin Bose J.

1,09215 silver badges28 bronze badges

answered May 24, 2020 at 2:21

Prashan Basantia

192 bronze badges

Comments

ysf · Accepted Answer · 2020-05-29 20:00:50Z

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, 2020 at 20:00

ysf

4,9023 gold badges31 silver badges32 bronze badges

answered May 29, 2020 at 19:22

Buubleek

1

Collectives™ on Stack Overflow

Django css background-image

8 Answers 8

Comments

Comments

Comments

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related