Question

我正在尝试添加this 3D image作为a wordpress website

内容的背景

This is the theme demo I'm using

我希望标题部分在所有页面上保持相同的大小，页脚也是如此。但是当身体在页面之间发生变化时，我希望它能够相应地改变，但仍然适合整个图像的页眉和页脚部分。

这个背景的问题在于它不对称，所以top＆amp;身体图像的底部假设包括顶部＆amp;画布底部（图像的中间部分）

我尝试了不同的技术来实现这个解决方案，但无法弄明白。问题是图像的身体部分没有重复，因为它在整个图像的高度都会发生变化，

我很感激解决方案，如果我必须将图像剪切成几个部分，对我来说无关紧要。

由于

Answer 1

如果运气好，可以使用border-image执行某些操作。

这个CSS，例如，

body {
  width:100%; height:100%;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
  margin:0;
  border-width:63px 40px 133px 40px;
  border-style:solid;
  border-color:brown;
  border-image-source:url(http://webbos.co/vibration/wp-content/themes/vibration-child-theme/images/back1.jpg);
  border-image-slice:189 120 399 120 fill;
}

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

Fiddle

免责声明：我已在Firefox和Chrome中测试过。 MDN表示它不适用于任何其他浏览器。

将非对称背景图像实现到站点

1 个答案: