我是 Flask 的新手,正在尝试向我的网络应用程序的所有页面添加背景图像。我已将背景图像保存为项目中“静态”文件夹内的“图像”文件夹中的“背景图像.jpg”。这是我的“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 文件,保存在名为“custom-styles.css”的“静态”文件夹中的“css”文件夹中。
.background-img{
background-image: url('..images/background-image.jpg');
}
当我运行该应用程序时,jumbotron 正在工作,但它只显示一个灰色框并且没有背景图像。有人能告诉我我做错了什么吗?
谢谢。