css - 将背景事物缩放到内容高度

Question

所以我想制作一个背景框，使用 CSS 缩放到页面内容的高度。我已经尝试了所有我知道该怎么做。背地盒分为上中下三部分。这是为了在我缩放它时不扭曲盒子周围的阴影。任何控制高度的东西都必须应用于中间部分。这是网站 http://www.unitedbygaming.com/test.php您可以右键单击页面源以查看您需要的任何内容。提前感谢您的帮助。

Answer 1

首先你的背景图片不在中心所以这里是让它居中的代码

body {
background-image: url("/images/site_background.png");
background-position: center top;

从正文 css 中删除。

background-repeat: no-repeat;

其次:

而不是使用这张图片<img src="/images/dfbox/mid.png" id="dfboxmid">在 html 中，尝试将其称为背景图像并将图像的高度 (2435px) 切片，这就是页面高度增加的原因。

可以调用背景图片，在repeat-y方向重复播放

您可以看到我删除了您的阴影图像的下图。

与其在一个 div 中使用所有三个图像，不如在页眉、中间和页脚等三个单独的 div 中分别使用它，这样会更方便。