如何在網站上製作動態背景圖片？

Question

我不知道你是否需要使用依賴關係，但我在rails上使用jquery和ruby。在這一點上，我有3個圖像，我想用於我的背景。

頂部圖像，中間圖像和底部圖像。我希望頂部和底部的圖像保持靜態，但是要根據頁面中有多少內容來設置中間圖像。任何人都有任何想法如何做到這一點？我一直在尋找一段時間，沒有運氣。

.background-top { 
    background-image: image-url('background/background_top.png'); 
    background-repeat: no-repeat; 
    background-size: 100%; 
    background-position: top; 
} 
.background-mid { 
    background-image: image-url('background/background_mid.png'); 
    background-repeat: no-repeat; 
    background-size: 100%; 
    background-position: center; 
} 
.background-bot { 
    background-image: image-url('background/background_bot.png'); 
    background-repeat: no-repeat; 
    background-size: 100%; 
    background-position: bottom; 
} 

Answer 1

var body = document.body; 
html = document.documentElement; 
var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight); 

使用此代碼來獲取你的頁面的高度。如果高度大於特定尺寸，則加入中間圖像加載條件。