如何在Django模板中設置背景圖片？

如何在Django模板中設置背景圖片？假設我的背景圖片的網址是www.randomlink.com/static/backgroundimagesplash.jpg如何在Django模板中設置背景圖片？

我看了一下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的主頁一樣大小？（爲了爭論，飛濺圖像將與Pinterest飛濺圖像具有相同的尺寸）

來源

2013-07-10 noahandthewhale

Django模板是HTML。所以你應該問如何在HTML頁面中設置背景。您可以將背景圖像設置爲html或body標籤。通常你在base.html文件中設置主要的可視化元素。 – aldux

這個問題與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

來源

2013-07-10 20:13:46

試試這個在您的模板中設置backgroung圖像：

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

來源

2015-09-08 09:21:07 Pinto

看看我是怎麼做的：在模板我把下面一行：

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

因此，我所獲得的固定的背景，並與屏幕的比例。

來源

2017-02-02 17:11:03

如何在Django模板中設置背景圖片？

回答

相關問題