Лучший способ использовать целое изображение в качестве фона сайта с помощью CSS и при этом учитывать разные размеры экрана? (как about.me)

Сейчас я использую следующее:

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, это было бы полезно.

Спасибо.