myNotlar Logo

backgroundPosition


Internet Explorer 4 Firefox 1 Opera 3.5

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%
  
  
İlgili Başlıklar
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | Oyunlar |