Django cannot add background image from css

Question

I've followed the django official document to set the static path. Document

I delete the isolated css file and put the style in my HTML file. It seems that the HTML file get the style successfully.

In my setting.py, I confirmed that STATIC_URL = '/static/' is there as default.

I create a new folder called static under my app folder where render this HTML page and also create the same folder under my project, I keep the content all the same in both of them because I was not sure which one really is the "static" path it recognized.

The image just doesn't appear.

I tried the solution here Add background image in css, and it doesn't at all.

I tried:

header.masthead {
  position: relative;
  background-color: #343a40;
  background: url("../static/img/main.jpg") no-repeat center center;
  background-size: cover;
  padding-top: 8rem;
  padding-bottom: 8rem;
}

It doesn't work

Please help me. Thanks!

Edit, this is my file structure: I get rid of the isolated CSS file and copy everything into the HTML file. Now it has the CSS style, but still can not get images.

MyProject
├── static
│   └──img
│       └── img_I_want_to_use_as_background.jpg
├── app
│   └── static
│   │     └──img
│   │         └── img_I_want_to_use_as_background.jpg
│   └── views.py (renders the HTML file)
│   └── other files and dirs under the app

first clear your browser history to see if this solves your problem. If not, Please show your file structure. It is most likely due to css is not in the right place and/or the way you referenced image path in your css — ha-neul, Dec 06 '20 at 00:01

score 0 · Answer 1 · answered Dec 06 '20 at 00:06

0

You are supposed to make a static folder inside your app.

App would look like this: App_name > Static > App_name > css > landing-page.min.css

In this case template should say this:

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'App_name/css/style.css' %}">

https://docs.djangoproject.com/en/3.1/intro/tutorial06/#customize-your-app-s-look-and-feel

Where it says this: Put the following code in that stylesheet (polls/static/polls/style.css)

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">

answered Dec 06 '20 at 00:06

Bryant

421
2
10

Thanks. I've updated my question with a file structure. I do have a static file under my app. I followed each step in the document. – Rrobinvip Dec 06 '20 at 00:16
Now the css style is embedded in my html. Do I need to edit the css in the same way to get the background picture? – Rrobinvip Dec 06 '20 at 00:17

ha-neul · Accepted Answer · 2020-12-06T00:51:35.593

Please put your css file under app. you need to make an app folder under your app's static folder, like below.

app/static/app/css/yourstylesheet.css

put your image:

app/static/app/img/main.jpg

In your html file:

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'app/css/yourstylesheet.css' %}">

then,

url("../img/main.jpg")

../means parent directory. you first go back to your static/app folder, and go to ```img`` folder and find your image.

If it is not working, clear browser history and test it again

score -1 · Answer 3 · answered Dec 06 '20 at 00:06

-1

Maybe just your cache saved previous css? try to shift + r or command + r if you use Mac

answered Dec 06 '20 at 00:06

Jirayr

1

Django cannot add background image from css

3 Answers3