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% | |