如何在我的Flask应用程序中使用CSS添加背景

Question

我是Flask的新手，正在尝试为我的web应用程序的所有页面添加背景图像。我已经将背景图像保存为"background image.jpg"，在项目中的"static"文件夹中的"images"文件夹。这是我的"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文件，保存在名为"customstyles.css"的"static"文件夹中的"css"文件夹中。

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

当我运行该应用程序时，jumbotron正在工作，但它只是显示一个灰色框，没有背景图像。有人能告诉我我做错了什么吗？

谢谢。

Answer 1

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

尝试在两个句点之后添加正斜杠，看起来可能只是css文件访问images文件夹的方式有问题。

Answer 2

背景图像的路径必须正确。如果该文件是静态文件，则需要背景图像的静态文件路径。

例如，如果background-image.jpg的路径为：

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

然后不是。。images/background-image.jpg您需要使用：

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

我相信，这是静态文件的默认路径，尽管您可以对该位置进行配置更改。