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

Question

我不知道您是否需要使用依赖项，但是我将Jquery与ruby一起使用在rails上。 不过要点是，我有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);

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