Giriş yap

CSS'de background-repeat Özelliği
CSS1

Arkaplan görselinin tekrarlanıp tekrarlanmayacağını, tekrarlanacak ise nasıl tekrarlanacağını belirlemek için kullanılır.

Yapısı (Syntax)background-repeat: repeat | repeat-x | repeat-y | no-repeat | initial | inherit;

Varsayılan Değer repeat
JavaScript Yapısı object.style.backgroundRepeat="repeat-x"
Animasyon Özellikleri Uygulanabilir Hayır

Değerler

Değer Açıklama Versiyon
repeat Görseli yatay ve dikey olarak tekrarlar. CSS1
repeat-x Görseli sadece yatak olarak tekrarlar. CSS1
repeat-y Görseli sadece dikey olarak tekrarlar. CSS1
no-repeat Görseli tekrarlamaz. CSS1
space Görsel kırpmaya uğramadan mümkün olduğu şekilde tekrarlanır. Tekrarlanan ilk ve son görsel iki köşeye tutturulur ve eğer kırpılmadan tekrarlanabilecek alan var ise ilgili boşlukları kırpılmadan doldurmaya devam eder. CSS1
round space değeriyle aynıdır tek farkı tekrarlanan görsel araları boşluksuz olarak tekrarlanır. CSS1
initial Varsayılan ayarlarına geri döndürür. CSS1
inherit Özelliği üst öğesinden miras alır. CSS1

Örnekler

Dikey eksende tekrarlanan görsel örneği;

.box {
	width: 300px;
	height: 300px;
	background-image: url(img/logo.png);
	background-repeat: repeat-x;
}

Hiçbir şekilde kendini tekrar etmeyen görsel örneği;

.box {
	width: 300px;
	height: 300px;
	background-image: url(img/logo.png);
	background-repeat: no-repeat;
}

Görselin boyutunu ayarlayarak kırpma işlemi olmadan mümkün olduğunca kendini tekrar ettirme örneği;

.box {
	width: 300px;
	height: 300px;
	background-image: url(img/logo.png);
	background-size: 40px;
	background-repeat: space;
}

background özelliğinde ki kısa kullanım örneği;

.box {
	width: 300px;
	height: 300px;
	background: url(img/logo.png) no-repeat;
}

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