Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Django css background-image

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

like image 439
Krystian Kazimierczak Avatar asked Feb 04 '17 21:02

Krystian Kazimierczak


People also ask

Where do I put CSS in Django?

css . In other words, your stylesheet should be at polls/static/polls/style. css . Because of how the AppDirectoriesFinder staticfile finder works, you can refer to this static file in Django as polls/style.

Can you use CSS on Django?

Including CSS in Django TemplateWe need to load the static files by adding the below line of code at the top of the template (. HTML) file. Then, insert the stylesheet in the HTML using link HTML tag. If you are new to the HTML and CSS, you can learn more about adding CSS in HTML code.

Can you put a background image in a div?

One way is to use the background-image CSS property. This property applies one or more background images to an element, like a <div> , as the documentation explains. Use it for aesthetic reasons, such as adding a textured background to your webpage.


3 Answers

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' );
}
like image 173
Bipul Jain Avatar answered Oct 12 '22 15:10

Bipul Jain


Try this:

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

like image 32
Rich Avatar answered Oct 12 '22 13:10

Rich


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;
}
like image 23
BusterT Avatar answered Oct 12 '22 15:10

BusterT