0

我正在尝试将此 3D 图像作为背景添加到wordpress 网站的内容中

这是我正在使用的主题演示

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

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

我尝试了不同的技术来实现这个解决方案，但无法弄清楚。问题是图像的主体部分不能很好地重复，因为它在图像的整个高度上都在变化，

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

谢谢

4

1 回答 1

1

If you are lucky, you can do something with border-image.

This CSS, for instance,

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;
}

sets the borders to a fixed width (in this case 1/3 of the width of the sides in the image) and distributes the rest of the image over the body background.
Then all you need to do is position the header and footer on top of the border of the body...

Fiddle.

Disclaimer: I've tested in Firefox and Chrome. MDN says it won't work on any other browser.

于 2013-09-12T15:03:45.463 回答