CSS background-position-y Özelliği

Tanım ve Kullanım

background-position-y Özellik, arka plan resminin y ekseni üzerindeki konumunu ayarlar.

İpucu:Öntanımlı olarak, arka plan resmi elemanın sol üst köşesine yerleştirilir ve dikey ve yatay yönde tekrarlanır.

Y ekseni üzerinde arka plan resmini nasıl konumlandırılır:

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-y: center;
}

Arka plan resmini üstte nasıl konumlandırılır:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: bottom;
}

Yatay eksende arka plan görselini yüzdelik kullanarak nasıl konumlandırılır:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 50%;
}

Yatay eksende arka plan görselini piksel kullanarak nasıl konumlandırılır:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 80px;
}

background-position-y: value;

Değer	Tanım
top	Arka plan konumunu y ekseninin üstüne yerleştirir.
bottom	Arka plan konumunu y ekseninin altına yerleştirir.
center	Arka plan konumunu y ekseninin merkezine yerleştirir.
y%	Y ekseninin üstü 0%, altı 100% olarak belirlenmiştir. Yüzdelik değerler, arka plan konum alanının yüksekliği ile arka plan görselinin yüksekliği arasındaki farkı ifade eder.
ypos	Üstten olan dikey uzaklık. Birimler piksel (örneğin 0px) veya diğerleri olabilir CSS Birimleri.
ypos offset	iki değer dilimi, sadece Firefox ve Safari'da desteklenir. ypos top veya bottom olarak ayarlanır. offset Bu, arka plan görseli ile ypos ayarının yatay veya dikey uzaklığıdır. Birimler piksel (örneğin 0px) veya diğerleri olabilir CSS Birimleri.
initial	Bu özelliği varsayılan değerine ayarlar. Aşağıdan bakın: initial.
inherit	Bu özelliği ebeveyn elementinden devralır. Aşağıdan bakın: inherit.

Varsayılan Değer:	0%
Geçirimsellik:	Hayır
Animasyon Yapımı:	Destekleniyor. Aşağıdan bakın:Animasyon İle İlgili Özellikler.
Sürüm:	CSS3
JavaScript Dilbilgisi:	object.style.backgroundPositionY="center"