Bir görüntünün tamamını CSS kullanarak bir web sitesi arka planı olarak kullanmak ve farklı ekran boyutlarına hitap etmek için daha iyi bir yol? Şu

Question

(about.me gibi) bu kullanıyorum:

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

Buradaki avantaj değilim ki herhangi bir Javascript kullanarak. Ama sonra, mutlak olarak konumlandırılmış elemanlar farklı ekranlarda görüntülendiğinde bir kabus haline gelir.

Şu anda sahip olduğum çözüm, bu öğeleri farklı ekran boyutlarına göre yazıyor ve konumlandırıyor (örneğin, 1024x768, id içeriğinin 10px olarak en yüksek değerine sahipken 1280x800'ün üstte bir şey olacak: 25px; vb.) ve bunları ayrı bir css dosyası olarak saklamak için sayfa yüklenirken uygun CSS'yi yükleyebilirim. Bunun zaman alıcı ve muhtemelen verimli olduğunu hissediyorum. Yüzde değerlerini kullanmak henüz keşfetmediğim bir seçenektir. Eğer zarif bir çözümü biliyorsanız, ya da büyük adamlar bunu nasıl yaptıysa, yardımcı olur.

Teşekkür ederiz.

Answer 1

bodybackground-size değerlerinden birini kullanarak background-image kullanmayı denediniz mi? İhtiyaçlarınıza bağlı olarak cover veya belki 100% 100% kullanabilirsiniz.

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

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