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
– ha-neul, Commented Dec 6, 2020 at 0:01

ha-neul · Accepted Answer · 2020-12-06 00:51:35Z

0

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

edited Dec 6, 2020 at 0:51

answered Dec 6, 2020 at 0:44

ha-neul

3,28814 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bryant · Accepted Answer · 2020-12-06 00:06:48Z

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 6, 2020 at 0:06

Bryant

4392 silver badges10 bronze badges

2 Comments

Rrobinvip Over a year ago

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 Over a year ago

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?

Jirayr · Accepted Answer · 2020-12-06 00:06:28Z

-1

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

answered Dec 6, 2020 at 0:06

Jirayr

1

Collectives™ on Stack Overflow

Django cannot add background image from css

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related