Как добавить фон, используя CSS в моем приложении Flask.? - PullRequest
Новая
       16

Как добавить фон, используя CSS в моем приложении Flask.?

1 голос
/ 20 февраля 2020

Я новичок в Flask и пытаюсь добавить фоновое изображение на все страницы моего веб-приложения. Я сохранил фоновое изображение как «background-image.jpg» в папке «images» в папке «stati c» в проекте. Вот мой файл 'base. html', который распространяется на все остальные мои файлы. 

{% extends 'bootstrap/base.html' %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom-styles.css') }}">


{% block title %}
Flog
{% endblock %}

{% block head %}
{{ ckeditor.load() }}
{{ super() }}
{% endblock %}

{% block navbar %}
    {% include '_navbar.html' %}
{% endblock %}


{% block content %}
<div class="jumbotron background-img">
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
            <div class="alert alert-{{ category }}" role="alert">
                {{ message }}
            </div>
            {% endfor %}
        {% endif %}
    {% endwith %}    
    {% block sub_content %}
    {% endblock %}
</div>
{% endblock %}

А вот мой файл css, сохраненный в папке 'css' в папке ' stati c 'папка с именем' custom-styles. css '. 

.background-img{
    background-image: url('..images/background-image.jpg');

}

Когда я запускаю приложение, jumbotron работает, но он просто показывает серый прямоугольник и никакого фонового изображения. Кто-нибудь может сказать мне, что я делаю неправильно?

Спасибо.

Ответы [ 2 ]

0 голосов
/ 20 февраля 2020

Путь к фоновому изображению должен быть правильным. Если этот файл является файлом stati c, то вам понадобится путь к файлу stati c для фонового изображения.

Например, если путь для background-image.jpg: 

path-to-static/images/background-image.jpg

Тогда вместо ..images / background-image.jpg вам нужно будет использовать: 

.background-img{
    background-image: url('/static/images/background-image.jpg');

}

Это, я полагаю, путь по умолчанию для stati c файлов, хотя вы можете вносить изменения в конфигурацию в этом месте.

0 голосов
/ 20 февраля 2020 
.background-img{
background-image: url('../images/background-image.jpg');
}

Попробуйте добавить forward sla sh после двух периодов, похоже, это может быть просто проблема с тем, как файл css обращается к папке с изображениями.

...