CSS background image will not load Django 2.1.2
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,
]
html css django-staticfiles django-settings
asked Nov 24 '18 at 14:32
JakeyBJakeyB
33
add a comment |
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,
]
html css django-staticfiles django-settings
asked Nov 24 '18 at 14:32
JakeyBJakeyB
33
add a comment |
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,
]
html css django-staticfiles django-settings
asked Nov 24 '18 at 14:32
JakeyBJakeyB
33
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,
]
html css django-staticfiles django-settings
html css django-staticfiles django-settings
asked Nov 24 '18 at 14:32
JakeyBJakeyB
33
asked Nov 24 '18 at 14:32
JakeyBJakeyB
33
edited Nov 24 '18 at 14:38
JakeyB
asked Nov 24 '18 at 14:32
JakeyBJakeyB
33
asked Nov 24 '18 at 14:32
JakeyBJakeyB
33
asked Nov 24 '18 at 14:32
JakeyBJakeyB
33
33
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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.
answered Nov 24 '18 at 17:54
Christian LopezChristian Lopez
1189
Thank you so much my friend, I'll be able to sleep tonight. This was driving me crazy! I really appreciate your help :)
– JakeyB
Nov 24 '18 at 18:16
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53459205%2fcss-background-image-will-not-load-django-2-1-2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Nov 24 '18 at 17:54
Christian LopezChristian Lopez
1189
Thank you so much my friend, I'll be able to sleep tonight. This was driving me crazy! I really appreciate your help :)
– JakeyB
Nov 24 '18 at 18:16
add a comment |
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.
answered Nov 24 '18 at 17:54
Christian LopezChristian Lopez
1189
Thank you so much my friend, I'll be able to sleep tonight. This was driving me crazy! I really appreciate your help :)
– JakeyB
Nov 24 '18 at 18:16
add a comment |
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.
answered Nov 24 '18 at 17:54
Christian LopezChristian Lopez
1189
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.
answered Nov 24 '18 at 17:54
Christian LopezChristian Lopez
1189
answered Nov 24 '18 at 17:54
Christian LopezChristian Lopez
1189
answered Nov 24 '18 at 17:54
Christian LopezChristian Lopez
1189
answered Nov 24 '18 at 17:54
Christian LopezChristian Lopez
1189
1189
Thank you so much my friend, I'll be able to sleep tonight. This was driving me crazy! I really appreciate your help :)
– JakeyB
Nov 24 '18 at 18:16
add a comment |
Thank you so much my friend, I'll be able to sleep tonight. This was driving me crazy! I really appreciate your help :)
– JakeyB
Nov 24 '18 at 18:16
Thank you so much my friend, I'll be able to sleep tonight. This was driving me crazy! I really appreciate your help :)
– JakeyB
Nov 24 '18 at 18:16
Thank you so much my friend, I'll be able to sleep tonight. This was driving me crazy! I really appreciate your help :)
– JakeyB
Nov 24 '18 at 18:16
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53459205%2fcss-background-image-will-not-load-django-2-1-2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
