调整div-element为页面背景

Question

我想创建一个带有背景图片的网页和一个我想固定在固定位置的容器。如果我使用绝对值和位置参数，例如 margin-left，我可以设置所有位置。

假设你有一张彩色图片作为背景，你想把你的 header-elment 放在某个点，因为它包含图片的灰度区域。

如果我既不更改屏幕分辨率也不更改浏览器的大小，这很有效 window。

更新可以在以下 jsfiddle 中找到示例：http://jsfiddle.net/fqpLu7xj/。header 元素应放置在特定点，以便两个背景匹配。如果调整页面大小，最小尺寸是 header 元素之一。

在这种情况下如何使此页面响应？

Answer 1

对于完整的背景图片，这应该是诀窍：

html { 
  width: 100%;
  height: 100%;
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

现在让我们添加一个 div:

Html:

<div id="container"></div>

Css:

#container{
 width: 80%;
 height 15%;
 border: 1px solid #fff;
 position: fixed;
 top: 1%;
 margin-left: auto;
 margin-right: auto;
}

此外，您可以根据需要设置样式。

调整div-element为页面背景

Adjust div-element to page background

html

css