Question

如何在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启动图像的尺寸相同）

Answer 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;
}

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

Answer 2

尝试此操作在模板中设置背景图片：

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

Answer 3

这个问题与Django无关。它纯CSS与CSS。

要在调整窗口大小时缩放图像，您应该使用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

上的演示

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

3 个答案: