如何添加div背景的margin-top？答案

【问题标题】：How can I add margin-top of the background of a div?如何添加div背景的margin-top？
【发布时间】：2015-05-07 13:51:40
【问题描述】：

我有这个page，我在其中显示一个框内的视频，并希望我的背景图像有一些“顶部边缘”，这样它就不会显示在框的边缘。我尝试添加background-position: 10%，但它不起作用。

现在看起来像这样：

这是我的代码：

.eu {
  height: auto;
  width: 100%;
  background: url(images/BODY-VERDE.png);
  position: absolute;
  top: 0;
}
.bg-image {
  position: relative;
}
.bg-image img {
  display: block;
  width: 100%;
  /* max-width: 1200px; */
  /* corresponds to max height of 450px */
  margin: 0 auto;
}
.container-video {
  width: 100%;
  height: auto;
  background: url(images/BODY-VERDE.png);
  margin: 0 auto;
  overflow: auto;
}

<div class="bg-image" style="width: 70%;margin: 0 auto;">

  <div class="eu">

    <div class="text-sus">
      <p>Set us perspiciatis</p>
      <p style="text-align: center;color: white;font-size: 16px;">unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p>
    </div>

    <div class="video">
      <img src="images/VIDEO.png" style="width:100%;height:auto;">
    </div>

  </div>

  <img src="images/CU-PRETURI.png">

</div>

我也尝试添加.bg-image img {margin-top:10%;}，但后来一切都失败了，我只想要背景图片。

【问题讨论】：

你能给它一个padding-top: 10%和background-position: 0 10%吗？
是，但没有任何变化
background-position: 0 10%; 应该可以工作。我会确保你不会在其他地方取消效果。

标签： html css background-image background-position

【解决方案1】：

尝试同时给出两个坐标：

background-position: 0 50px;

在以下示例中，bg 图片的上边距为 50px

#wrapper {
  width: 100%;
  height: 300px;
  border: 1px solid red;
  background-image: url('http://www.bestmanspeechestoasts.com/wp-content/themes/thesis/rotator/sample-4.jpg');
  background-position:  0 50px;
  background-repeat: no-repeat;
}

&lt;div id="wrapper"&gt;&lt;/div&gt;

【讨论】：