Örnek
Bir Arka plan resmi konumlandırmak için:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Kendin dene " Daha "Try it Yourself" Aşağıdaki örnekler.
Tanımı ve Kullanımı
background-position özelliği arka plan resmi başlangıç konumunu belirler.
Tip: Varsayılan olarak, bir arka plan görüntüsü bir öğenin sol üst köşesine yerleştirilmiş ve hem dikey hem de yatay olarak tekrarlanır.
| Varsayılan değer: | 0% 0% |
|---|---|
| Miras: | no |
| canlandırılabilir: | yes. Read about animatable Try it |
| Versiyon: | CSS1 |
| JavaScript sözdizimi: | object .style.backgroundPosition="center" Try it |
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
| özellik | |||||
|---|---|---|---|---|---|
| background-position | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: IE8 ve önceki bir eleman birden arka plan resimleri desteklemez.
CSS sözdizimi
background-position: Mülkiyet Değerler değer Açıklama Oynat left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom Eğer sadece bir anahtar kelime belirtirseniz, diğer değer olacaktır "center" Oynat " x% y% ilk değer yatay konum ve ikinci değer dikeydir. Sol üst köşesi 0% 0% 'dir. Sağ alt köşe% 100% 100'dür. Yalnızca bir değer belirtirseniz, diğer değer% 50 olacaktır. . Varsayılan değer: 0% 0% Oynat " xpos ypos ilk değer yatay konum ve ikinci değer dikeydir. Sol üst köşesi 0 0. Birimler piksel olabiliyor (0px 0px) veya başka herhangi bir CSS birimleri . Yalnızca bir değer belirtirseniz, diğer değer% 50 olacaktır. Sen ve% pozisyonları karıştırabilirsiniz Oynat " initial varsayılan değerine bu özelliği ayarlar. İlk hakkında okuyun Oynat " inherit üst öğesinden bu özelliği devralır. Yaklaşık miras oku
Diğer Örnekler
Örnek
Nasıl yüzde kullanan bir background-image konumlandırmak için:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 30% 20%;
}
Kendin dene "
Örnek
Nasıl pikselleri kullanarak bir background-image konumlandırmak için:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 100px;
}
Kendin dene "
İlgili Sayfalar
CSS öğretici: CSS Arkaplan
CSS referansı: background-image property
HTML DOM referansı: backgroundPosition property