background image tam sayfa genişliğini genişletmiyor

this page üzerinde 2-tonlu arka planım var. Sayfanın yapısı şöyledir:background image tam sayfa genişliğini genişletmiyor

<body> 
    <div id="upbg"/> 
    <div id="container"/> 
</body

Bu arka plan upbg için karanlık bir arka plan resmi ve vücut üzerinde daha hafif bir arka plan resmi ekleyerek elde edilir. upbg için css geçerli:

#upbg { 
    background: #FFFFFF url(images/bg-dark.jpg) repeat-x scroll 0 0; 
    height: 275px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
}

Eğer sağa arasında kaydırma, o zaman upbg arka plan görüntüsü bütününü doldurun etmediğini fark edeceksiniz kaydırma çubukları görünür böyle bir tarayıcı penceresi çok dar yaparsanız sayfanın genişliği.

Benim tahminim şudur: 'genişlik:% 100', sayfanın tüm genişliği yerine tarayıcı penceresinin genişliği anlamına gelir, bunu düzeltmenin bir yolu var mı? daha doğrusu sayfanın tüm genişliğinden daha, tarayıcı penceresinin genişliğini ifade eder, orada geçerli:

kaynak

2009-03-14 Dónal

Benim tahminim '% 100 genişlik' çünkü bu olmasıdır

sayesinde Don yolu düzeltmek bu?

100% o (bu durumda body içinde, genişliği, ailesindeki html genişliğine bağlı olacaktır) göre konumlandırılmış üst eleman olarak geniş olması anlamına gelir. Aksi belirtilmedikçe tarayıcı penceresi kadar geniş olacak.

sorun body daha geniş olabilir body başka çocuk sahibi olduğunu: Her iki #container ve #footer her zaman en az 1026px geniş olacak şekilde biçimlendirilmiştir. Bu, ebeveyn öğelerini genişletmez, çünkü bunların tarayıcı penceresi kadar geniş olacağını belirledik; bunun yerine, ebeveynlerini taşmaktadır. Bunun varsayılan cevabı kaydırma çubuklarını görüntülemektir, böylece taşan içeriği kaydırabilir ve görüntüleyebilirsiniz; overflow:hidden stilini html veya body olarak eklediyseniz, içeriğinizin ve altbilginizin tarayıcı penceresinin boyutuna kırpıldığını ve kaydırma çubuklarının görüntülenmeyeceğini görürsünüz.

bu kolay çözümlerin bir çift vardır:

Wrap #content ve #footer #upbg içinde yerine onunla kendilerinden önce. Sonra mevcut stilleri kaldırın ve aşağıdaki gibi biçimlendirin: position: absolute; padding-top:25px; background: url(images/bg-dark.jpg) repeat-x scroll 0 0; Bu iki şeyi başarır: #upbg için bir genişlik belirtmiyorsunuz, böylece yeni çocuklarını kapatacak kadar geniş bir alana sahip olmanıza izin veriyorsunuz. artık gereksiz olan bir çok stilden (body için ayarlamış olduğunuz dolguyu, #content'daki bazı stillerle birlikte temizlemek isteyeceksiniz). Alternatif olarak, #content ve #footer'da minimum genişlikten kurtulun, böylece taşmazlar.

kaynak

2009-03-14 03:55:04 Shog9

Harika cevap, çok teşekkürler! Sadece bir soru, yanıtınızın ilk satırı okuysa: "% 100, ilgili konumlandırıldığı ana öğe kadar geniş olacağı anlamına gelir. Bu durumda, * gövde *." –

Uh, evet. Son düzenlemeyi berbat ettim ... düzeltildi. – Shog9

tam bir arka plan kullanabilmeniz için, genişlik & yükseklik ayarlı gövde etiketi ile% 100'e ayarlanmış bir mutlak konumlandırılmış görüntü kullanabilirsiniz. , arka plan için dikkate alınan görüntüden daha yüksek olan diğer öğelerin z dizinini ayarlar.

 

<head> 
    ... 
    <style> 
    .virtualBg{ 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     z-index: 0; 
    } 
    </style> 
</head> 
<body> 
    <img src="path/to/bg.jpg" class="virtualBg" /> 
    ... 
</body>

ama tekrar-X gövde elemanının için arka plan her iki renk tonlarını ihtiva eden bir dikey kırpılmış resmi kullanmak ve tavsiye edilir.

kaynak

2009-03-14 06:12:21 sepehr

background image tam sayfa genişliğini genişletmiyor

cevap

İlgili konular