Question

我正在使用此CSS将图像放入<body>：

body {
  background: url('picture.png') no-repeat; 
  background-size: contain;
}

图像显示在浏览器窗口的顶部，但我需要将此图像从顶部放置几个像素。

我已尝试使用padding/margin-top: 20px;，但它对我没有帮助，图片仍然位于浏览器窗口的顶部。

如何将body标记的背景图像从顶部向下移动几个像素？

注意：我需要将图片放在body标签中。

Answer 1

您需要改为使用background-position。

body {
  background: url('picture.png') no-repeat; 
  background-position: 0 20px;
  background-size: contain;
}

Answer 2

您可以使用css background-position属性

例如

body {
  background: url('picture.png') no-repeat; 
  background-position: 0px 50px; /* This makes the image appear 50px from top */
  background-size: contain;
}

移动身体背景图像

2 个答案: