A better way to use an entire image as a website background using CSS and still cater to different screen sizes? (like about.me)

Question

Currently I'm using this:

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

The advantage here is that I'm not using any Javascript at all. But then, the absolute-ly positioned elements become a nightmare when viewed on different screens.

Currently the solution I have is write and position these elements according to different screen sizes (for example, 1024x768 would have the id content's top value as 10px whereas 1280x800 will have something like top:25px; and so on..) and store them as a separate css file so I can load the appropriate CSS during page load. I feel this is time-consuming and probably in-efficient too. Using percentage values is an option I haven't explored yet. If you know of an elegant solution, or how the big guys at about.me do it, it would help.

Thank You.

Answer 1

Have you tried using background-image on the body with one of the background-size values? You could use cover or perhaps 100% 100% depending on your needs.

Demo: http://jsfiddle.net/ThinkingStiff/UBaN6/

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