background-position Özelliği Temel Özellikler
- CSS Yazımı :
background-position: bottom | center | left | right | top;- Örnek :
background-position: left top;|background-position: 13% 13%;- Öntanımlı Değer :
0% 0%- Uygulanabilen Etiketler :
- Tüm Etiketler.
::first-letterve::first-lineögelerine de uygulanabilir. - Kalıtsallık :
- Yok.
- Tarayıcı Desteği :
- Tüm Tarayıcılar
- Animasyon :
- Destekleniyor
animationÖzelliği - Javascript :
öge.style.backgroundPosition = "center";- Sürüm :
- CSS1 / CSS2 (düz. 1) / CSS Backgrounds and Borders Module Level 3
- Açıklama :
background-position Özelliği Kullanımı
Markanız için 300X300 alan.
CSS background-position özelliği; background-image özelliği ile belirtilmiş görselin background-origin özelliğine göre konumlandırılmasını sağlar.
Arka plan görselleri background-position'a göre yerleştirilir. Eğer background-position tanımlanmamışsa, görsel sol yukarıdan (0% 0% konumu) başlar.
Daha fazlası için CSS background özelliğine bakın !
Arka plan özelliklerinin kısaltması olan background özelliğinde kullanılmazsa öntanımlı değer kullanılır.
background-position Özelliği Tarayıcı Desteği
| Tarayıcı →Özellik ↓ | |||||
|---|---|---|---|---|---|
| Temel Destek | 1 | 3.5 | 1 | 1 | 4 |
| Çoklu Arka plan | 3.6 | 10.5 | 1.3 | 1 | 9 |
| 4'lü Değer | 13 | 10.5 | 7 | 25 | 9 |
| Tarayıcı →Özellik ↓ | |||||
|---|---|---|---|---|---|
| Temel Destek | Var | Var | Var | Var | Var |
| Çoklu Arka plan | Var | Var | Var | Var | Var |
| 4'lü Değer | 13 | Var | Var | Var | Var |
background-position Özelliğinin Alabileceği Değerler
<konum>- Bir
<konum>. Bir konum bir ögeyi etiketin kutusuna göreli olarak koymak için x/y koordinatını tanımlar. Bir ya da iki değer kullanılarak tanımlanır. Eğer iki değer kullanılırsa ilk değer yatay konumu belirlerken ikinci değer dikey konumu belirler. Eğer tek değer kullanılırsa ikinci değercentervarsayılır. -
1-değerli yazım: Olası değerler :
centeranahtar sözcüğü görseli ortalar.top(üst),left(sol),bottom(alt), ya daright(sağ) anahtar sözcüklerinden birisi. Bu; görselin bulunacağı kenarı belirler. Diğer boyut 50%'dir. Böylelikle öge, belirlenen kenarın ortasında gösterilir.- Bir
<uzunluk>ya da<yüzde>. Bu, sol kenara göre X koordinatını belirler. Y koordinatı ise 50%'dir.
2-değerli yazım: Olası değerler :
- Anahtar sözcüklerden birisi
top,left,bottom, ya daright'tir.leftya darightanahtar sözcükleri kullanılıyorsa bu X koordinatını belirlerken diğeri Y koordinatını belirler.topya dabottomanahtar sözcüğü kullanılması durumunda bu, Y koordinatını belirlerken diğeri X koordinatını belirler. - Bir
<uzunluk>ya da<yüzde>. Diğer değerleftya darightise bu, üst kenara göre Y koordinatını belirler. Diğer değertopya dabottomise bu, sol kanara göre X koordinatını belirler. Eğer her iki değer de<uzunluk>ya da<yüzde>ise o zaman ilk değer X koordinatını belirlerken ikincisi ise Y koordinatını belirler.
Daha yalın anlatacak olursak; ilk değer ile dikeyde konum belirlenirse diğer değer yataydaki konumu belirliyordur ya da tam tersi biçimde ilk değer ile yataydaki konum belirleniyorsa diğer değer ile dikeydeki konum belirleniyordur.
Böylelikle ;
1. Eğer bir değer
topya dabottomise ikinci değertopya dabottomolamaz.2. Eğer bir değer
leftya darightise ikinci değerleftya darightolamaz.
Yani hem
bottom bottomhem deleft rightörnekleri yanlıştır.