在Django的基本模板中设置背景图片

ni8mr 发表于 Dev

ni8mr

这是我的Django项目的结构-

src/
    login_manager/
        migrations/
            ....
        __init__.py
        admin.py
        apps.py
        models.py
        views.py
        tests.py
        urls.py
    port/
        __init__.py
        settings.py
        urls.py
        wsgi.py
    static/
        admin/
            .....
    templates/
        login_manager/
            login.html
            .....
        __base.html
    media/
        image/
            containers.jpg
    manage.py
requirements.txt

在这里，我的项目名称为port。在此项目下，有一个名为login_manager的应用程序。我正在尝试为__base.html模板添加背景图像。但是由于某些原因，它失败了。

这里是我的__base.html -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>GPSL Inventory Management</title>
    <meta name="viewport" content="width=device-width,
        initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!--styles-->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/yeti/bootstrap.min.css">
    <style type="text/css">
        body { 
         background: url('{{ MEDIA_URL }}image/containers.jpg') no-repeat center center fixed; 
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
         background-size: cover;
        }

        .panel-default {
          opacity: 0.9;
          margin-top:30px;
        }

        .form-group.last {
          margin-bottom:0px;
        }

        .container{
          margin: 0 auto;
        }
     </style>
    {% block extrahead %}
    {% endblock %}
</head>

<body>
    <div class="container">
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>

我已经在settings.py中注册了我的媒体网址，如下所示-

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

如何在父模板中生成背景图像？

编辑1：图像是静态的。

由于背景图片是静态文件，因此您应该使用静态网址，而不要使用媒体。

{% load staticfiles %}

<style type="text/css">
        body { 
         background: url('{% static "image/containers.jpg" %}') no-repeat center center fixed; 
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
         background-size: cover;
        }
</style>

您可以在相关的Django文档中了解有关此内容的更多信息：管理静态文件。

Django教程中的静态文件也有很好的参考。