CSS фоновое изображение не будет загружать Django 2.1.2 - PullRequest
Новая
       38

CSS фоновое изображение не будет загружать Django 2.1.2

0 голосов
/ 24 ноября 2018

Я ищу помощь по этому вопросу.Я исследовал это до смерти, я относительно новичок в Джанго, и я врезался в стену.Мое фоновое изображение не будет загружаться из моего файла CSS.Я пробовал разные форматы каталогов img / image.jpg static / image.jpg и т. Д. За последние три часа я прочитал столько постов, связанных с stackoverflow, сколько смог, вместе с различными учебными пособиями, но, к сожалению, ничего не решило проблему.Любая помощь будет принята с благодарностью и заранее благодарю:)

Каталог изображений: static / img / forrest2.jpg

Каталог CSS: 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,
]

1 Ответ

0 голосов
/ 24 ноября 2018

Я считаю, что проблема в том, что вы используете свойство background-image для применения всех ваших стилей для фона, но это свойство предназначено только для отображения самого изображения и любых градиентов, которые вы хотите сопровождатьit.

То, что вам нужно, это сокращенное свойство , которое позволяет вам добавлять все значения свойств фона (т. е. background-size, background-position, background-repeat и т. д.) водна строка.

Просто замените background-image на background и все будет готово.

...