html - 使用 CSS 将整个图像用作网站背景并仍然满足不同屏幕尺寸的更好方法？（比如about.me）

Question

目前我正在使用这个：

HTML：

<div id="container">
  <img src="x.jpg" id="bg" />
  <div id="content">
   <h1>Welcome to my website.</h1>
   <p>Boo!</p>
  </div>
</div>

CSS：

#bg{
position:absolute;
top:0;
left:0;
height:100%;
z-index:10;
}

#container{
/* max values provided due to the max size of the image available with me(1200x800) */
max-width:1200px;
max-height:800px;
}

#content{
position:absolute;
top:10px;
left:100px;
z-index:100;
}

这里的优点是我根本没有使用任何 Javascript。但是，当在不同的屏幕上查看时，绝对定位的元素会变成一场噩梦。

目前我的解决方案是根据不同的屏幕尺寸编写和定位这些元素（例如，1024x768 的 id 内容的最高值为 10px，而 1280x800 的值为 top:25px; 等等..）并将它们存储为一个单独的 css 文件，以便我可以在页面加载期间加载适当的 CSS。我觉得这很耗时，也可能效率低下。使用百分比值是我尚未探索的选项。如果您知道一个优雅的解决方案，或者 about.me 的大佬们是如何做到的，那将会有所帮助。

谢谢你。

Answer 1

您是否尝试过使用background-image其中body一个background-size值？您可以使用cover或可能100% 100%取决于您的需要。

演示：http: //jsfiddle.net/ThinkingStiff/UBaN6/

body {
    background-image: url('http://thinkingstiff.com/images/matt.jpg');  
    background-size: cover;  
    background-repeat: no-repeat;
}