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

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);
}

tayfunerbilen
184 gün önce eklendi.
Github'da Düzenle
Önemli Başlıklar