how to add background in Django2.0 using html or css

Question

I want to add an image inside my django homepage, but I always cannot get the correct location of the image file I want(yellow high light) The picture below are the thing I type so far:

https://i.sstatic.net/ecyQu.png

also in the same file

{% load static %}
        body {
            background-image: url('{% static "/bitcoin.jpg" %}');
        }

Do I need static whenever I want to insert image in Django2.0? also, I see some people open separate static file and some ppl put image inside the templete. I am confused where I should put? How can put the background image inside the html??

thank you so your answering!!!!

update ** this is what I have so far enter image description here

updat2 ** the only refer to admin file only, enter image description here

Vanessa · Accepted Answer · 2018-05-14 03:40:47Z

1

You can use inline CSS just for that case. You already have a .wrapper element, so if you want to put a static served image you'd do something like this:

<div class="wrapper" style="background-image: url('{% static 'default_page/bitcoin.jpg' %}');">
   Your content here
</div>

If you want to use in your CSS files, just use the absolute path according to your static configuration. If you serve your static files using /static (that means, the path /static/default_page/bitcoin.jpg is correct and shows you the desired image), you can just put into the CSS something like:

body {
  background-image: url('/static/default_page/bitcoin.jpg');
}

Hope that works!

EDIT:

As Thomas said, you've placed the image in the wrong folder (inside templates instead of on your static files folder). Refer to this to configure your project the right way.

edited May 14, 2018 at 3:40

answered May 14, 2018 at 3:35

Vanessa

3074 silver badges11 bronze badges

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

3 Comments

Stack Ray Over a year ago

I still have a problem, the static file only refer to admin file (see my update2 pic). Why it does not refer to the static/img/ I have??

Vanessa Over a year ago

You have to add the static folder inside the project folder, where your apps (like default_page) are and then add to your project settings the STATICFILES_DIRS, seen here. If you follow the tutorial given on the page I just linked, it will work. Hope that helps, if you need more help just post here.

Stack Ray Over a year ago

I know the reason why. I am using the PyCharm and there is a bug that it cannot read my static file. =[ I understand your concept, thank you Vanessa x100!

Thomas · Accepted Answer · 2018-05-14 01:59:11Z

0

You've placed your bitcoin.jpg in the same folder as your templates. Django serves all static file, such as pictures, from the static directory. Only templates go in the template directory. Create a directory called static inside your hompage app, create a directory inside that called default_page, and place your background image there. Restart the dev server, and your image should appear.

answered May 14, 2018 at 1:59

Thomas

11.9k4 gold badges43 silver badges57 bronze badges

4 Comments

Stack Ray Over a year ago

it return a x-image in my page :( do u know why does it happen? <img src='{% static "default_page/bitcoin.jpg" %}'/> it the format correct ? I put in static>default_page>bitcoin.jpg

Stack Ray Over a year ago

the error: [13/May/2018 19:28:01] "GET /static/bitcoin.jpg HTTP/1.1" 404 1657 Not Found: /bitcoin.jpg

Thomas Over a year ago

that does look correct. have you setup your statcfiles directory in your settings?

Stack Ray Over a year ago

I know the reason why. I am using Pycharm to implement Django. Pycharm has a bug it cannot able to read my static file. Anyway, thank you!!

Collectives™ on Stack Overflow

how to add background in Django2.0 using html or css

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related