html div在背景图像

时间:2014-03-11 14:11:10

标签: css html

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

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

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

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

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

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

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

提前致谢!

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

2 个答案:

答案 0 :(得分:0)

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

您应该将背景的大小设置为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;
}

答案 1 :(得分:0)

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

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


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