backgroundPosition özelliği, arka plan resminin yerleştirileceği konumu belirler.
DOM Sözdizimi
element.style.backgroundPosition = "konumAdi"
element.style.backgroundPosition = "yatay dikey"
element.style.backgroundPosition = "yüzde"
element.style.backgroundPosition = "yatayYüzde dikeyYüzde"
element.style.backgroundPosition = "Ölçü"
element.style.backgroundPosition = "yatayOlcu dikeyOlcu"
CSS Sözdizimi
background-position: konumAdi
background-position: yatay dikey
background-position: yüzde
background-position: yatayYüzde dikeyYüzde
background-position: Ölçü
background-position: yatayOlcu dikeyOlcu
| konumAdi | Arka plan resmini ortalayarak aşağıdaki değerlere göre yerleştirir:
- top : Resim üst-orta konuma yerleşir.
- center : Resim elementin yatay ve dikey orta konumuna yerleşir.
- bottom : Resim alt-orta konuma yerleşir.
- left : Resim sol-orta konuma yerleşir.
- right : Resim sağ-orta konuma yerleşir.
|
| dikey | yatay ile birlikte ve önce veya sonra yazılır. Alabileceği değerler:
- top : Resim dikey üst konuma yerleşir.
- center : Resim dikey orta konuma yerleşir.
- bottom : Resim dikey alt konuma yerleşir.
|
| yatay | dikey ile birlikte ve önce veya sonra yazılır. Alabileceği değerler:
- left : Resim yatay sol konuma yerleşir.
- center : Resim yatay orta konuma yerleşir.
- right : Resim yatay sağ konuma yerleşir.
|
| yüzde | Bu şekilde tek yüzde değer tanımlandığın da diğer değer olan dikey (vertical) değerin '50%' olduğu kabul edilip dikeyde ortalanarak bu yüzde değerine göre yatay yerleşim yapılır. |
| yatayYüzde | Arka plan resminin yüzde olarak yatay (horizontal) yerleşimini belirler. |
| dikeyYüzde | Arka plan resminin yüzde olarak dikey (vertical) yerleşimini belirler. |
Yüzde değerler de 0% 0% ve 100% 100% arasında ayrı ayrı değer atanabilir. İlk değer yatay konumu, ikinci değer dikey konumu ifade eder. 0% 0% değerinde arka plan resminin sol-üst köşesi elementin sol-üst köşesine denk gelir. Fakat 100% 100% değerinde resmin sol-üst köşesi elementin sağ-alt köşesine denk gelmez: Resmin sağ-alt köşesi elementin sağ-alt köşesine denk gelir. Yani, matematiksel anlamıyla bu yüzde oranlarına resmin boyu dahil değildir.
| Ölçü | CSS Ölçü Birimlerine göre bir değer alır. Bu şekilde tek değer tanımlandığın da diğer değer olan dikey (vertical) değerin 'center' veya '50%' olduğu kabul edilip dikeyde ortalanarak bu değere göre yatay yerleşim yapılır. |
| yatayOlcu | CSS Ölçü Birimleri ile arka plan resminin yatay (horizontal) yerleşimini belirler. |
| dikeyOlcu | CSS Ölçü Birimleri ile arka plan resminin dikey (vertical) yerleşimini belirler. |
CSS background-position Özelliğinin Standart Değerleri
top-left
0% 0% | | top-center
50% 0%
top | | top-right
100% 0% | |
center-left
0% 50%
left | | center-center
50% 50%
center | | center-right
100% 50%
right | |
bottom-left
0% 100% | | bottom-center
50% 100%
bottom | | bottom-right
100% 100% | |