I am looking for some help regarding this issue. I have researched it to death, I'm relatively new to django and I've hit a wall. My background image will not load from my CSS file. I've tried different directory formats img/image.jpg static/image.jpg etc. I've read as many previous stackoverflow posts as I could for the last three hours along with various tutorials but nothing solved the issue unfortunately. Any help would be greatly appreciated and thank you in advance :)
Image directory is: static/img/forrest2.jpg
CSS directory: static/css/style.css
Error Codes:
"GET / HTTP/1.1" 200 2074
[24/Nov/2018 14:10:51] "GET /static/css/style.css HTTP/1.1" 304 0
[24/Nov/2018 14:13:28] "GET / HTTP/1.1" 200 2074
[24/Nov/2018 14:13:29] "GET /static/css/style.css HTTP/1.1" 200 1234
[24/Nov/2018 14:14:29] "GET / HTTP/1.1" 200 2074
[24/Nov/2018 14:14:29] "GET /static/css/style.css HTTP/1.1" 200 1235
CSS File:
@import url('https://fonts.googleapis.com/css?family=Open+Sans:800|Poppins:500');
html, body{
margin: 0;
padding:0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin-auto: auto;
background-image: url('/static/img/forrest2.jpg') no-repeat 50% 50%;
background-size: cover;
/*Allows the whole image to display*/
display: table;
top: 0;
/*no top white line*/
}
Django Settings in settings.py:
STATIC_URL = '/static/'
STATIC_DIRS = 'static'
STATICFILES_DIRS = [
STATIC_DIRS,
]
I believe the problem is that you are using the background-image property to apply all your styles for the background, but that property is only meant to display the image itself and any gradients you want to accompany it.
What you want is the shorthand property that allows you to add all the values of the background properties (i.e. background-size, background-position, background-repeat, etc) in one line.
Simply replace background-image with background and you should be all set.