Lepszy sposób użycia całego obrazu jako tła strony przy użyciu CSS i nadal obsługujący różne rozmiary ekranu? (Jak about.me)

Question

Obecnie używam to:

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

Zaletą jest to, że nie jestem za pomocą dowolnej Javascript. Ale wtedy bezwzględnie ustawione elementy stają się koszmarem podczas oglądania na różnych ekranach.

Obecnie mam rozwiązanie, które piszę i pozycjonuję te elementy zgodnie z różnymi rozmiarami ekranu (na przykład 1024x768 będzie miało najwyższą wartość treści id jako 10px, podczas gdy 1280x800 będzie miało coś w rodzaju top: 25px i tak dalej ..) i przechowuj je jako oddzielny plik CSS, dzięki czemu mogę załadować odpowiedni CSS podczas ładowania strony. Uważam, że jest to czasochłonne i prawdopodobnie również nieefektywne. Używanie wartości procentowych jest opcją, której jeszcze nie odkryłem. Jeśli wiesz o eleganckim rozwiązaniu lub o tym, jak robią to duże osoby z about.me, to pomogłoby to.

Dziękuję.

Answer 1

Czy próbowałeś użyć background-image na body z jedną z wartości background-size? Możesz użyć cover lub być może 100% 100% w zależności od Twoich potrzeb.

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

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