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
