如何在一定像素后垂直重复身体的背景图像？

Question

当我这样做时：

body{
    background-image:url('pix/image.png');
    background-repeat:repeat-y;
}

它正确地垂直重复image.png

我的问题是，在开始重复之前，我希望背景的某些像素可见。

我试过这个：

body:before{
  content: "";
  height: 400px;
  display: block;
  background: #f9fae8;
}

但问题在于它将所有内容都移动了，这不是我需要的。

为了清楚起见，这是我需要的图表（用油漆制作！）：<​​/ p>

注意：我注意到另一种解决方案是将所有内容放在容器div中，并将此div作为背景图像并给它一个x像素的上边距。问题是生成内容的平台不喜欢被修改很多，所以如果可以在不添加任何额外div的情况下改变主体，那将会很棒。

Answer 1

将position:absolute;提供给:before。写得像这样：

body:before{
  content: "";
  height: 400px;
  display: block;
  background: #f9fae8;
  position:absolute;
  left:0;
  right:0;
  top:0;
  z-index:-1;
}

你也可以查看CSS: background position with repeat?