v2.5.2
Giriş yap

CSS background-position Özelliği

CSS1

Arkaplan görselinin nereden başlayacağını belirler. Arkaplan varsayılan olarak sol üst köşeye dayalı bir şekilde görünecektir.

Yapısı (Syntax)background-position: değer;
Varsayılan Değer 0% 0%
JavaScript Yapısı object.style.backgroundPosition="center"
Animasyon Özellikleri Uygulanabilir Evet (Daha fazla detay)

Değerler

Değer Açıklama Versiyon
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
Eğer sadece bir değer tanımlarsanız 2. değer otomatik olarak center değerine eşit olacaktır. CSS1
x% y% İlk değer yatay, ikinci değer dikey eksende konumunu ayarlar. Sol üst köşe için 0% 0%, sağ alt köşe için 100% 100% şeklinde değer girilmelidir. Eğer sadece ilk değer girildiyse, ikinci değer varsayılan olarak 50% şeklinde belirlenir. Varsayılan değeri ise 0% 0% dir. CSS1
Xpoz Ypoz İlk değer yatay, ikinci değer dikey eksende konumunu ayarlar. Sol üst köşe 0 0 olarak belirlenir. Uzunluk birimi olarak CSS'de kullanılan tüm uzunluk birimleri verilebilir. (Örn: px, cm, em vb.) Sadece ilk değer belirtilirse ikinci değer varsayılan olarak 50% şeklinde tanımlanır. Ayrıca %'li değerleri diğer uzunluk birimleriyle karıştırarak kullanabilirsiniz. CSS1
initial Varsayılan ayarlarına geri döndürür. CSS1
inherit Özelliği üst öğesinden miras alır. CSS1

Örnekler

Arkaplan görselini yatay ve dikey ortalamak için;

.box {
	width: 400px;
	height: 400px;
	background-image: url(img/logo.png);
	background-position: center; /* center center 'a eşit */
}

Arkaplan görselini sağ üste ayarlamak için;

.box {
	width: 400px;
	height: 400px;
	background-image: url(img/logo.png);
	background-position: top right;
}

Arkaplan görselini dikey eksende sağa doğru ayarlamak için;

.box {
	width: 400px;
	height: 400px;
	background-image: url(img/logo.png);
	background-position: right;
}

Arkaplan görselini %'li ayarlamak için;

.box {
	width: 400px;
	height: 400px;
	background-image: url(img/logo.png);
	background-position: 50% 20px; /* Dikey eksende %50, yatay eksende 20px başlangıç konumu */
}

Tarayıcı Desteği

  Chrome Firefox Edge Internet Explorer Opera Safari
background-position 1 1 12 4 3.5 1
multiple_backgrounds 1 3.6 12 9 10.5 1.3
4_value_syntax 1 13 12 9 10.5 7
Destekliyor
Desteklemiyor
tayfunerbilen
1455 gün önce eklendi - 6908 kez görüntülendi.
Github'da Düzenle
Önceki background-image Sonraki background-repeat