使用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.我觉得这很耗时,也可能效率不高.使用百分比值是我尚未探索的选项.如果你知道一个优雅的解决方案,或者大约有些人在做什么,它会有所帮助.

谢谢.

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;
}