Question

我有一个网站模板，它是我设置为背景图像的图像。现在我需要做的是将html放在上面。例如，整个模板的一部分有一些图像，但最终当它们被点击时，它们需要做一些事情。所以我需要在包含不同部分的整个模板上放置一些div。

我不知道对此有什么正确的方法。我现在所做的是将背景图像设置为：

#body{
    width:1280px;
    height:8000px;
    background: url(something.jpg);
    background-repeat: no-repeat;
    background-position:center;
}

因此，如果您要调整窗口的大小，它始终将图像居中。这很好。

现在我需要在身体中添加另一个div（当然），它需要保持在图像的顶部。

我已经在互联网上尝试和搜索了很多但是div似乎有一个无法移动的位置。所以我如何调整它保持在同一个地方的窗口。

我希望我有点清楚我正在尝试做什么，并记住这是我第一次做这样的事情所以任何帮助都非常感谢。

提前致谢！

PS：我不是试图在后台覆盖整个页面，只是原始大小为1280，如果窗口调整大小超过1280，则需要将图像居中。

Answer 1

（如果您尝试将图像设置为正文的背景以覆盖整个屏幕）

您应该将背景的大小设置为cover

，而不是设置身体的宽度和高度。

css-tricks.com/perfect-full-page-background-image

body {
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

Answer 2

您可以执行此操作，使图像始终居中

.main{
    width:600px;
    margin:50px auto;
}


<div class="main">
  <img src="path to img"/>
</div>