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

Question

当我这样做时：

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

它正确地垂直重复 image.png

我的问题是我希望在开始重复之前可以看到背景的一些像素。

我试过这个：

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

但问题是它会将所有内容向下移动，这不是我需要的。

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

注意：我确实注意到另一种解决方案是将我的所有内容放入容器 div 中，并为该 div 提供背景图像，并为其提供 x 像素的 margin-top。问题是产生内容的平台不喜欢被修改很多，所以如果可以在不添加任何额外 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？