CSS'de background-image Özelliği
CSS1
CSS3
Bu özellik ile bir ve ya birden fazla arkaplan görseli ayarlanabilir.
Varsayılan olarak, bir arkaplan resmi sol üst köşeden başlayıp kendisini genişlik ve yükseklik kadar tekrar eder.
Yapısı (Syntax)background-image: url | none | initial | inherit;
JavaScript Yapısı |
object.style.backgroundImage="url('test.jpg')"
|
Animasyon Özellikleri Uygulanabilir | Hayır (Daha fazla detay) |
Değerler
Değer | Açıklama | Versiyon |
---|---|---|
URL | Görselin adresini belirtilir. | CSS1 |
none | Arkaplan görseli kaldırılır. | CSS1 |
linear-gradient() | Yukarıdan aşağıda en az 2 renk tanımlayarak doğrusal gradyan oluşturur. | CSS3 |
radial-gradient() | Merkezden kenarlara en az 2 renk tanımlayarak radyal gradyan oluşturur. | CSS3 |
repeating-linear-gradient() | Tekrar eden doğrusal gradyan oluşturur. | CSS3 |
repeating-radial-gradient() | Tekrar eden radyal gradyan oluşturur. | CSS3 |
initial | Varsayılan ayarlarına geri döndürür. | CSS1 |
inherit | Özelliği üst öğesinden miras alır. | CSS1 |
Örnekler
En basitinden bir görsel belirleyerek başlayalım.
.box {
background-image: url(../img/test.jpg);
background-repeat: no-repeat;
background-position: center;
}
Birden fazla görsel belirlemek istersek;
.box {
background-image: url(img/logo.png), url(img/bg.png);
background-repeat: no-repeat, repeat;
}
Gradientlere örnek vermek gerekirse;
.box {
background-image: linear-gradient(red, yellow, blue);
}
.box2 {
background-image: radial-gradient(red, yellow);
}
Tarayıcı Desteği
Chrome | Firefox | Edge | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|---|
background-image
|
1 | 1 | 12 | 4 | 3.5 | 1 |
element
|
1 | 4 | ||||
gradients
|
2 | 3.6 | 12 | 10 | 11 | 4 |
image-rect
|
1 | 4 | ||||
image-set
|
2 | 79 | 15 | 6 | ||
multiple_backgrounds
|
1 | 3.6 | 12 | 9 | 10.5 | 1.3 |
svg_images
|
1 | 4 | 12 | 9 | 9.5 | 5 |
Destekliyor
Desteklemiyor