Bu yılın başlarında WebKit, CSS background
kısayol özelliğinin davranışını güncelledi. Bu değişiklikle birlikte, kısayol bildiriminde ayarlanmamışsa background
kısayol özelliği, background-size
değerini varsayılan auto auto
değerine sıfırlar. Bu değişiklik, Chrome ve diğer WebKit tarayıcılarını spesifikasyon ile uyumlu hale getirmekte ve Firefox, Opera ve Internet Explorer'ın çalışma biçimiyle eşleşmektedir.
Android için Chrome'un WebKit'teki mevcut düzeltmelere geçişle birlikte bu değişiklik Android'de kullanıma sunuluyor. Bu, webkit için yapılan bir düzeltme olduğundan, birden çok tarayıcıda test edilen siteler muhtemelen bundan etkilenmemiştir.
Eski yöntem
// background-size is reset to auto auto by the background shorthand
.foo {
background-size: 50px 40px;
background: url(foo.png) no-repeat;
}
background
kısayol özelliği herhangi bir boyut özelliği içermediğinden background-size
, varsayılan auto auto
değerine sıfırlanır.
Resim boyutunu belirtmenin doğru yolu
// background-size is specified after background
.fooA {
background: url(foo.png) no-repeat;
background-size: 50px 40px;
}
// background-size is specified inline after position
.fooB {
background: url(foo.png) 0% / 50px 40px no-repeat;
}
fooB
ürününde, background
kısayolunda bir background-size
belirtmek için önce position
(%0), ardından bir eğik çizgi ve background-size
(50 piksel 40 piksel) belirtilmesi gerekir.
Mevcut kodla ilgili düzeltmeler
Bu sorunu kolayca çözecek birkaç seçenek vardır:
background
kısayol özelliği yerinebackground-image
özelliğini kullanın.background-size
öğesini en sonda, bu öğedebackground
özelliğini ayarlayan diğer tüm CSS kurallarına göre daha yüksek bir spesifiklikle ayarlayın. Ayrıca:hover
kurallarını kontrol etmeyi unutmayın.!important
özelliğinibackground-size
öğesine uygulayın.- Boyut bilgilerini
background
kısayol özelliğine taşıyın.
Bonus: arka plan resmi ofsetleri
Bu değişikliğe ek olarak, artık resmin arka planda konumlandırılmasında daha fazla esneklik var. Eskiden, yalnızca sol üst köşeden resmin konumunu belirleyebiliyordunuz. Artık kapsayıcının kenarlarına olan uzaklığı belirleyebiliyordunuz. Örneğin, background-position: right 5px bottom 5px;
ayarını yaparsanız resim sağ kenardan 5 piksel ve alttan 5 piksel konumlandırılır. JSBin'deki bu örneğe göz atın.