如何将背景图像放在带有标题的网页中

Question

我必须从以下开始：http://jsbin.com/opokev/39

问题

• 图像根据浏览器窗口大小进行缩放和压缩。例如，如果我打开firebug（占用页面的一半），背景图像会压缩并且看起来不太好。

要求

• 我不希望图像从底部或向上剪切
• 我需要一个大约85px
的标题
• 我不想要网页上的水平或垂直滚动​​条。

我以前曾问过问题，但得到的答案却很复杂，我真的很挣扎。我试图在livingsocial.com上获得类似背景图像的东西，唯一的区别在于我不希望我的标题像他们一样接管部分图像。

Answer 1

我看到了你的背景图片问题。你将它设置为div中的图像。为什么不摆脱它，只需将以下内容应用于css：

body {
background-image: http://i53.tinypic.com/347a8uu.jpg;
background-repeat:none;

}

或者，如果由于某种原因你需要将它保留为div，只需摆脱position: absolute;

对于标题，只需在<body之后添加一个div，如下所示：

<div class="header_wrapper"></div>

和css：

.header_wrapper {

width: 85px;
margin-left:auto;
margin-right:auto;
}

Answer 2

如果是背景，那么为什么要将其添加为img？

... CSS

background:url("http://i53.tinypic.com/347a8uu.jpg" center top no-repeat;
background-size:cover;