Ders Planı

CSS Referans Kılavuzu

CSS Özelliği

Seçmeli Dersler

Kurs Önerisi:

CodeW3C.com Çağdaş Kiti

CSS background-position-x Özelliği

önceki sayfa background-position
Sonraki Sayfa background-position-y

Tanım ve Kullanım

background-position-x Özellik, arka plan görselinin x eksenindeki konumunu ayarlar.

İpucu:Varsayılan olarak, arka plan görseli elemanın sol üst köşesine yerleştirilir ve dikey ve yatay yönde tekrarlanır.

Örnek

Örnek 1

x ekseninde arka plan görseli nasıl konumlandırılır:

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

Kişisel olarak deneyin

Örnek 2

Arka plan görselini sağa nasıl konumlandırılır:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: right;
}

Kişisel olarak deneyin

Örnek 3

Piksel kullanarak arka plan görseli nasıl konumlandırılır:

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

Kişisel olarak deneyin

Örnek 4

Piksel konumlandırma kullanarak arka plan görseli nasıl kullanılır:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 150px;
}

Kişisel olarak deneyin

Örnek 5

Farklı arka plan özellikleri kullanarak konteynerini kaplayan bir arka plan görseli oluşturun:

.hero-image {
  background-image: url("photographer.jpg"); /* Kullanılan görsel */
  background-color: #cccccc; /* Görsel kullanılamıyorsa bu rengi kullanır */
  height: 300px; /* Yükseklik ayarlamak zorunludur */
  background-position-x: center; /* Görseli ortalar */
  background-repeat: no-repeat; /* Görseli tekrar etmez */
  background-size: cover; /* Arka plan görselinin boyutunu, tüm konteyneri kapsamak için ayarlar */
}

Kişisel olarak deneyin

CSS dilbilgisi

background-position-x: value;

Özellik değeri

Değer	Açıklama
left	Arka planı x ekseninin soluna konumlandırır.
right	Arka planı x ekseninin sağına konumlandırır.
center	Arka planı x ekseninin merkezine konumlandırır.
x%	X ekseninin solunda 0%, sağında 100% olarak belirtilir. Yüzde değerleri, arka plan konumlandırma alanının genişliği ile arka plan görselinin genişliği arasındaki farkı belirtir.
xpos	Sol kenardan olan dikey mesafe. Birimi piksel (örneğin 0px) veya diğer olabilir CSS Birimleri.
xpos offset	çift değer dilimi, sadece Firefox ve Safari'da desteklenir. xpos sol veya sağ olarak ayarlanır offset Bu, arka plan görselinin sol veya sağ kenarı ile arka plan konumlandırma alanının sol veya sağ kenarı arasındaki dikey mesafeyi belirtir Birimler piksel veya diğer olabilir CSS Birimleri.
initial	Bu özelliği öntanımlı değerine ayarlar. bkz: initial.
inherit	Bu özelliği ebeveyn elementinden devralır. bkz: inherit.

Teknik ayrıntılar

Öntanımlı değer:	0%
Miras:	Hayır
Animasyon yapımı:	Destekleniyor. bkz:Animasyonla ilgili özellikler.
Sürüm:	CSS3
JavaScript dilbilgisi:	object.style.backgroundPositionX="center"