Menu
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
439
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.
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.
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.
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' );
}
Try this:
background-image:url('{{ STATIC_URL }}/img/bg.jpg');
32
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
