[Fixed]-CSS Background Image doesn't load

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;

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.

👤rob

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');:)

Leave a comment