如何在 Django 模板中设置背景图像？答案

【问题标题】：How can one set a background image in a Django Template?如何在 Django 模板中设置背景图像？
【发布时间】：2013-07-08 22:11:20
【问题描述】：

如何在 Django 模板中设置背景图像？假设我的背景图片的网址是 www.randomlink.com/static/backgroundimagesplash.jpg

我查看了Pinterest 主页。众所周知，Pinterest 是使用 Django 构建的。我在他们的主页上检查了他们的一些元素。

他们使用的其中一个图形是这里的初始图像：PinterestSplashImage.jpg

初始图像设置在底部中心。我注意到的一件事是，初始图像的大小相对于浏览器的大小进行了调整。

这是我当前的主页模板：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<link href="www.randomlink.com/static/favicon.ico" rel="icon" type="image/x-icon">
<head>
<title>Homepage</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style>
body{
    font-family:Arial,Helvetica,sans-serif;
    font-size: 12px;
}
</style>
</head>
<body>
    {{ state }}
    <form action="/login/" method="post">
        {% if next %}
        <input type="hidden" name="next" value="{{ next }}" />
        {% endif %}
        username:
        <input type="text" name="username" value="{{ username}}" /><br />
        password:
        <input type="password" name="password" value="" /><br />

        <input type="submit" value="Log In" />
    </form>
</body>
</html>

如何将 www.randomlink.com/static/backgroundimagesplash.jpg 设置在底部中心并使其可调整大小，就像 Pinterest 对其主页所做的那样？（为了争论，初始图像将与 Pinterest 初始图像的尺寸相同）

【问题讨论】：

Django 模板是 HTML。所以你应该问如何在 HTML 页面中设置背景。您可以将背景图像设置为 html 或 body 标签。通常你在 base.html 文件中设置主要的视觉元素。

标签： html css django-templates

【解决方案1】：

看看我是怎么做到的：在模板中我放了以下行：

<body id="bg" style="background-image: url('{% static "images/33.jpg"%}')";>

在css中：

#bg{
    background-size: 1800px 900px;
    background-repeat: no-repeat;
    background-position: top;
    background-attachment: fixed;
}

结果我得到了一个固定的背景和屏幕的比例。

【讨论】：

【解决方案2】：

这个问题与 Django 无关。它是带有 CSS 的纯 html。

要在调整窗口大小时缩放图像，您应该使用 CSS3 的属性background-size: contain。

要放置到底部和居中，您可以使用 CSS 的属性 position: absolute; background-position: 50% 100%;。

最后一个例子：

<style type="text/css">
.splash {
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url('https://s-passets-ec.pinimg.com/webapp/app/desktop/images/logged_out_splash.77aa6339.jpg?1373235165');
    background-size: contain;
    background-position: 50% 100%;
    background-repeat: no-repeat;
    bottom: 0;
    height: 100%;
    margin: auto;
    max-height: 461px;
    max-width: 1034px;
    position: absolute;
    width: 100%;
}
</style>

<div class="splash"></div>

在jsfiddle上查看演示

【讨论】：

【解决方案3】：

试试这个在你的模板中设置背景图片：

 <div class="inner" style="background-image: url({% static "frontend/img/parallax-image.jpg" %}");>

【讨论】：