Giriş yap

CSS'de 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

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 */
}

tayfunerbilen
18 gün önce eklendi.
Github'da Düzenle
Önemli Başlıklar