CSS arka plan boyutu Özellik
Örnek
Bir arka plan görüntüsünün boyutunu "otomatik" ile ve piksel olarak belirtin:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
#example2 {
background: url(mountain.jpg);
background-repeat:
no-repeat;
background-size: 300px 100px;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik background-size, arka plan görüntülerinin boyutunu belirtir.
Bu özellikle kullanabileceğiniz dört farklı sözdizimi vardır: anahtar sözcük sözdizimi ("otomatik", "kapak" ve "içerir"), tek değerli sözdizimi (görüntünün genişliğini ayarlar (yükseklik "otomatik" olur), iki değerli sözdizimi (birinci değer: görüntünün genişliği, ikinci değer: yükseklik) ve çoklu arka plan sözdizimi (virgülle ayrılmış).
| Varsayılan değer: | Oto |
|---|---|
| Miras: | Hayır |
| canlandırılabilir: | Evet. Canlandırılabilir hakkında bilgi edinin |
| Sürüm: | CSS3 |
| JavaScript sözdizimi: | nesne .style.backgroundSize="60px 120px" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
-webkit-, -moz- veya -o- ile takip edilen sayılar, bir önekle çalışan ilk sürümü belirtir.
| Property | |||||
|---|---|---|---|---|---|
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
CSS Sözdizimi
background-size: auto|length|cover|contain|initial|inherit;
Mülk değerleri
| Value | Description | Play it |
|---|---|---|
| auto | Default value. The background image is displayed in its original size | |
| length | Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units | |
| percentage | Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto" | |
| cover | Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges | |
| contain | Resize the background image to make sure the image is fully visible | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Daha fazla örnek
Örnek
Yüzde ile bir arka plan görüntüsünün boyutunu belirtin:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100%
100%;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75%
50%;
}
Örnek
"Kapak" ile bir arka plan görüntüsünün boyutunu belirtin:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Örnek
Bir arka plan görüntüsünün boyutunu "içerir" ile belirtin:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain;
}
Örnek
Burada iki arka plan resmimiz var. İlk arka plan görüntüsünün boyutunu "içerir" ve ikinci arka plan görüntüsünün boyutunu "kapak" ile belirtiriz:
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain, cover;
}
Örnek
Bir "kahraman" görüntüsü oluşturmak için farklı arka plan özelliklerini kullanın:
.hero-image {
background-image: url("photographer.jpg"); /* The
image used */
background-color: #cccccc; /* Used if the image is
unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
İlgili Sayfalar
CSS eğitimi: CSS Arka Planları
HTML DOM referansı: backgroundSize özelliği