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

Question

我不知道您是否需要使用依赖项，但我使用 Jquery 和 ruby​​ on 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);

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