CSS Background Image doesn't load

Question

I'm trying to load an image to my page and set it as my background, below is the css and html that I am working with. The CSS page seems to load, as my test font and background colors show up but for whatever reason my background image doesn't.

I am using Django as my web framework.

Appreciate the help!

HTML:

<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">

<head>
    <title>Test</title>
    <meta charset="utf-8" />

 <link rel="stylesheet" href="{% static 'personal/css/frontpagebackground.css' %}" type = "text/css"/>
</head>

<body>


<p>This is a test</p>


</body>
</html>

CSS:

body
{
background-image:url(personal/static/personal/img/home.jpg) no-repeat;
background-repeat:no-repeat;
background-size:100%;
background-color: green;
min-height: 100%;
}


p {
    font-style: italic;
    color: red;

}

Remove the no-repeat from background-image as you already have it in a separate property background-repeat, and see if it works. — Hamza Ishak
– Hamza Ishak, Commented Feb 8, 2017 at 9:52

Grey Li · Accepted Answer · 2017-02-09 03:26:37Z

1

You used background-image, so the no-repeat is not actually working. Try adding the no-repeat below as background-repeat: no-repeat;.

 background-image: url('image-url-here.png');
 background-repeat: no-repeat;

edited Feb 9, 2017 at 3:26

Grey Li

13k4 gold badges60 silver badges67 bronze badges

answered Feb 8, 2017 at 9:54

monsteronfire

867 bronze badges

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

4 Comments

spectras Over a year ago

That, or background: url('image-url-here.png') no-repeat;. But he has to choose either combined properties with background shorthand or split properties with full names. Cannot mix.

spectras Over a year ago

As you like, both ways make sense as long as one remains consistent within their project.

monsteronfire Over a year ago

@Phum, can you post your folder structure?

monsteronfire Over a year ago

@Phum, depending on where your background image is located, you may need to change the url path reference to match it. Your current image path suggesta that the personal directory is on the same level as your HTML file.

rob · Accepted Answer · 2017-02-09 02:51:04Z

0

I've had problems like this with django, primarily because my {% static %} location was confusing me. I think this is a non-css issue, and a path issue.

It helped me to use the dev console to check for Resource Failed To Load error. It will spit out the path that the machine is looking for, and it's likely different than what you specified.

I.e. is your css file located along

personal/static/personal/img/home.jpg

relative to your css file? You might just need to back up a directory, i.e.

../personal/static/personal/img/home.jpg

Either way, the console should give you your path, and use that to determine where your CSS file is digging for the image.

answered Feb 9, 2017 at 2:51

rob

2,1791 gold badge25 silver badges47 bronze badges

Comments

Archit Gargi · Accepted Answer · 2022-05-11 15:54:53Z

0

If your CSS files are in a path such as /static/css/style.css and the images are under a path such as /static/images/test.jpg then you have to place the test.jpg image directly in the folder with the style.css i.e. /static/css/test.jpg and in your HTML file give it the name test.jpg without using the static path i.e. background-image:url('test.jpg');:)

edited May 11, 2022 at 15:54

Archit Gargi

6821 gold badge12 silver badges25 bronze badges

answered May 10, 2022 at 15:58

LewAlbert

11 bronze badge

Collectives™ on Stack Overflow

CSS Background Image doesn't load

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related