Question

我不知道你是否需要使用依赖项，但我在轨道上使用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);

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

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

1 个答案: