v2.5.2
Giriş yap

CSS 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 (Daha fazla detay)

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

Tarayıcı Desteği

  Chrome Firefox Edge Internet Explorer Opera Safari
background-repeat 1 1 12 4 3.5 1
multiple_backgrounds 1 3.6 12 9 10.5 1.3
round_space 1 49 12 9
( ! ) Notice: Undefined index: version_added in /home/prototurk.com/public_html/app/view/article-css.php on line 223
Call Stack
#TimeMemoryFunctionLocation
10.0002360112{main}( ).../index.php:0
20.0034443576require( '/home/prototurk.com/public_html/app/controller/category.php' ).../index.php:101
30.0069454520require( '/home/prototurk.com/public_html/app/view/article.php' ).../category.php:34
40.0180613392parseTemplate( ).../article.php:112
50.0180613488preg_replace_callback ( ).../template.php:126
60.0180613984bb_json( ).../template.php:126
70.0182645816require( '/home/prototurk.com/public_html/app/view/article-css.php' ).../template.php:216
7
2-value 1 13 12 9 10.5 5
Destekliyor
Desteklemiyor
tayfunerbilen
1224 gün önce eklendi - 5396 kez görüntülendi.
Github'da Düzenle
Önceki background-position Sonraki backface-visibility