v2.1.1
Giriş yap

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
tayfunerbilen
76 gün önce eklendi - 2628 kez görüntülendi.
Github'da Düzenle
Önceki background-color Sonraki background-position