Un modo migliore per utilizzare un'intera immagine come sfondo di un sito web usando i CSS e comunque soddisfare le diverse dimensioni dello schermo? (Come about.me)

Question

Attualmente sto usando questo:

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

Il vantaggio è che io non sono usando qualsiasi Javascript a tutti. Ma poi, gli elementi posizionati in modo assoluto diventano un incubo se visualizzati su schermi diversi.

Attualmente la soluzione che ho è scrivere e la posizione di questi elementi in base alle diverse dimensioni dello schermo (ad esempio, 1024x768 avrebbe valore superiore del contenuto di id come 10px mentre 1280x800 avrà qualcosa come top: 25px; e così via ..) e memorizzarli come file CSS separato in modo da poter caricare il CSS appropriato durante il caricamento della pagina. Ritengo che questo sia dispendioso in termini di tempo e probabilmente anche inefficiente. L'utilizzo di valori percentuali è un'opzione che non ho ancora esplorato. Se sei a conoscenza di una soluzione elegante, o di come i grandi ragazzi a circa.me lo fanno, sarebbe d'aiuto.

Grazie.

Answer 1

Hai provato a utilizzare background-image su body con uno dei valori background-size? Potresti usare cover o forse 100% 100% in base alle tue esigenze.

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

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