Html 实现站点的非对称背景图像

我正试图添加作为背景的内容

我希望页眉部分在所有页面上保持相同的大小，页脚也一样。但是随着正文在一页又一页的变化，我希望它能相应地变化，但仍然适合整个图像的页眉和页脚部分

这个背景的问题是它不是对称的，所以身体图像的顶部和底部应该包括画布的顶部和底部（图像的中间部分）

我尝试了不同的技术来实现这个解决方案，但没有找到答案。问题是图像的主体部分没有很好地重复-y，因为它在图像的整个高度上都会发生变化

我会很感激一个解决方案，如果我必须将图像切割成几个部分，这对我来说并不重要

---

谢谢

如果你幸运的话，你可以用

边框图像

做点什么

比如这个CSS,

正文{
宽度：100%；高度：100%；
-moz框大小：边框框；-webkit框大小：边框框；框大小：边框框；
保证金：0；
边框宽度：63px 40px 133px 40px；
边框样式：实心；
边框颜色：棕色；
边框图像源：url(http://webbos.co/vibration/wp-content/themes/vibration-child-theme/images/back1.jpg);
边界图像切片：189120399120填充；
}

将边框设置为固定宽度（在本例中为图像中边宽度的1/3），并将图像的其余部分分布在身体背景上。
然后你所需要做的就是将页眉和页脚放在正文边框的顶部

---

免责声明：我已经在Firefox和Chrome中进行了测试。表示它在任何其他浏览器上都不起作用。

您可能希望将此内容发布到其他浏览器上，而不是发布在此处，您可能会在此处获得更好的反馈。这是一个类似的问题，但是你肯定需要更多的工作来获得你想要的效果，因为透视图在页面的顶部和底部之间移动。不确定是否会有一个非常好的解决方案来满足您的需求。祝你好运