Firefox background-position:bottom Sorunu

Firefox background-position:bottom Sorunu

Aslında bu duruma ne kadar sorun denir tartışılır, ama konunun özü şu. Diyelim ki bir web sayfası hazırlıyorsunuz ve oluşturduğunuz tasarımda, body arka plana bir resim atamayı düşünüyorsunuz. Bu işi gerçekleştirebilmek için CSS background özelliğini kullanıyoruz.

Bilmiyorum hiç karşılaştınız mı, eğer tasarım gereği body’ye uygulamayı düşündüğünüz arka planın, tarayıcı pencerenin dikey ekseninde, alt kısımda olması gerekirse, Firefox ve Opera’da ilginç bir durumla karşılaşıyorsunuz. IE, Safari ve Chrome kodu farklı yorumluyor.

body {
	background:url(oztecnic.jpg) no-repeat left bottom;
}

Firefox ve Opera, burada body etiketinin etki alanını, içeriğin yüksekliğiyle ilişkilendiriyor. Eğer body’ye bir arka plan rengi verecek olursak, bütün alana etki ettiğini görüyoruz.

Sorunu çözmek için <html> etiketine height:100% vermek kısmen işe yarıyor.

html {
	height:100%;
}

body {
	background:url(oztecnic.jpg) no-repeat left bottom;
}

Buradan bakabilirsiniz. Bu durumda ise eğer içerik, tarayıcı penceresinin yüksekliğini aşıyorsa, body’ye verdiğimiz arka plan olduğu yerde kalmaya devam ediyor. 

html {
	height:100%;
}

body {
	background:url(oztecnic.jpg) no-repeat left bottom;
}

div {
	height:1000px;
}

Bu durumu şuradan görebilirsiniz. Konunun Firefox açısından nihai çözümü şu şekilde gerçekleşiyor…

html {
	min-height:100%;
}

body {
	background:url(oztecnic.jpg) no-repeat left bottom;
}

div {
	height:1000px;
}

Sayfanın son halini buradan görebilirsiniz.

Hemen Paylaş!
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Live
  • MySpace
  • LinkedIn
  • Technorati
  • Netvibes
  • FriendFeed
  • Reddit
  • Yahoo! Bookmarks

Fırından yeni çıkmış yazılardan haberdar olmak için RSS yayınıma abone olabilir ya da beni Twitter'dan takip edebilirsiniz.

Yorumla Bakalım

Yorumlara Git

Daha Fazlasını Oku!

Makale Detayı

Bu Makale için toplam 0 adet yorum bulunmaktadır...

Bu Makale 1 April, 2009 ve saat 22:47 itibariyle CSS kategorisi altına kaydedilmiştir. Bu makale ile ilgili yorumları RSS 2.0 beslemesinden takip edebilirsiniz.. Bu makale için yorum yapabilir, veya kendi web sitenize trackback sağlayabilirsiniz...

Yorumla

Yorumunuzu ve katkılarınızı sabırsızlıkla bekliyoruz :)

Yukarıya Çık