如何在网站上制作动态背景图片？

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

使用此代码来获取你的页面的高度。如果高度大于特定尺寸，则加入中间图像加载条件。