CSS background-size Özelliği

Tanım ve Kullanım

background-size Arka plan görselinin boyutunu belirler.

Ayrıca bkz:

CSS Eğitimleri:CSS arka planveCSS Arka Plan (Gelişmiş)

HTML DOM İpuçları Kılavuzu:backgroundSize Özelliği

Örnek

Arka plan görselinin boyutunu belirler:

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

Kişisel Deneyim

CSS Dilbilgisi

background-size: length|percentage|cover|contain;

Özellik Değeri

Değer Açıklama Test
length

Arka plan görselinin yüksekliğini ve genişliğini ayarlar.

İlk değer genişliği ayarlar, ikinci değer yüksekliği ayarlar.

Sadece bir değer ayarlanırsa, ikinci değer "auto" olarak ayarlanır.

 Test
percentage

Arka plan görselinin genişliğini ve yüksekliğini ebeveyn öğesinin yüzdesi olarak ayarlar.

İlk değer genişliği ayarlar, ikinci değer yüksekliği ayarlar.

Sadece bir değer ayarlanırsa, ikinci değer "auto" olarak ayarlanır.

 Test
cover

Arka plan görselini yeterince genişleterek, arka plan görselinin arka plan alanını tamamen kaplar.

Arka plan görselinin bazı bölümleri, arka plan konumlandırma alanında görüntülenemez.

 Test
contain Görseli en büyük boyuta genişleterek, genişliği ve yüksekliği içerik alanına tam olarak uyacak şekilde yapar. Test

Teknik Ayrıntılar

Öntanımlı Değer: oto
Devralabilirlik: hayır
Sürüm: CSS3
JavaScript Dilbilgisi: object.style.backgroundSize="60px 80px"

Daha fazla örnek

Arka plan görselini genişletir
Arka plan görselini genişleterek, içerik alanını tamamen kaplar.
Arka plan görselini genişleterek, arka plan görselini dört kez yatayda kopyalar
Arka plan görselini genişleterek, arka plan görselinin tam olarak dört kez yatayda kopyalanmasını sağlar.

Tarayıcı Desteği

Tabloda belirtilen rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü gösterir.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
4.0
1.0 -webkit-		 9.0 4.0
3.6 -moz-		 4.1
3.0 -webkit-		 10.5
10.0 -o-