background-repeat Özelliği

background-repeat özelliği, bir öğenin arka plan resminin nasıl tekrarlanacağını belirtir. Varsayılan olarak resim hem X hem de Y ekseninde tekrarlanır, böylece tüm erişilebilir alanı kaplar.

Sözdizimi

cssseçici {
  background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

Değerler

Değer	Açıklama
`no-repeat`	Resim hiç tekrarlanmayacaktır.
`repeat-x`	Resim X ekseninde tekrarlanacaktır.
`repeat-y`	Resim Y ekseninde tekrarlanacaktır.
`repeat`	Resim hem X hem de Y ekseninde tekrarlanacaktır.
`space`	Resim, alanı tamamen dolduracak şekilde tekrarlanır, eğer bu başarılamazsa, resimler arasına boşluk eklenir.
`round`	Resim, alana tam sayıda resim sığacak şekilde tekrarlanır, eğer bu başarılamazsa, arka plan resimleri ölçeklenir.

Varsayılan değer: repeat - tüm ekranı desenle kaplar.

Örnek

Varsayılan olarak arka plan resmi, tüm öğeyi kaplayacak şekilde döşenecektir:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Örnek

Resmin tekrarlanmamasını sağlayalım:

html<div id="elem"></div>

css#elem {
  background-repeat: no-repeat;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Örnek

Şimdi resmin X ekseninde tekrarlanmasını sağlayalım:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-x;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Örnek

Şimdi de Y ekseninde:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-y;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Örnek

Eksenlerde tekrarlanan resimler, background-position özelliği kullanılarak konumlandırılabilir:

html<div id="elem"></div>

css#elem {
  background-repeat: repeat-y;
  background-position: top center;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Örnek

space değerinin nasıl çalıştığını görelim:

html<div id="elem"></div>

css#elem {
  background-repeat: space;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Örnek

round değerinin nasıl çalıştığını görelim:

html<div id="elem"></div>

css#elem {
  background-repeat: round;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Ayrıca Bakınız

Arka plan için kısaltma özelliği olan background özelliği