移动身体背景图片答案

【问题标题】：Move body background image移动身体背景图片
【发布时间】：2012-12-16 06:40:09
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： html css image position

【解决方案1】：

你可以使用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】：

您需要改用background-position。

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

【讨论】：