Properti background-repeat

Properti background-repeat mengatur bagaimana gambar latar elemen diulang. Secara default, gambar diulang baik pada sumbu X maupun sumbu Y, sehingga menutupi seluruh area yang tersedia.

Sintaks

cssselector {
  background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

Nilai

Nilai	Keterangan
`no-repeat`	Gambar tidak akan diulang sama sekali.
`repeat-x`	Gambar akan diulang pada sumbu X.
`repeat-y`	Gambar akan diulang pada sumbu Y.
`repeat`	Gambar akan diulang pada sumbu X dan sumbu Y.
`space`	Gambar akan diulang sebanyak mungkin untuk mengisi area sepenuhnya, jika tidak memungkinkan, ruang kosong akan ditambahkan di antara gambar-gambar.
`round`	Gambar akan diulang sehingga sejumlah bilangan bulat gambar muat di dalam area, jika tidak memungkinkan, maka gambar latar akan diskalakan.

Nilai default: repeat - menutupi seluruh layar dengan pola.

Contoh

Secara default, gambar latar akan menutupi seluruh elemen:

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

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

Результат:

Contoh

Mari kita buat agar gambar tidak diulang:

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

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

Результат:

Contoh

Sekarang biarkan gambar diulang pada sumbu X:

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

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

Результат:

Contoh

Sekarang pada sumbu Y:

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

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

Результат:

Contoh

Gambar yang diulang pada sumbu dapat diposisikan menggunakan properti background-position:

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

Результат:

Contoh

Mari kita lihat bagaimana nilai space bekerja:

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

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

Результат:

Contoh

Mari kita lihat bagaimana nilai round bekerja:

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

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

Результат:

Lihat juga

properti background,
yang merupakan properti singkatan untuk latar