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

selector {
	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:

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

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

Contoh

Mari kita buat agar gambar tidak diulang:

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

#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:

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

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

Contoh

Sekarang pada sumbu Y:

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

#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:

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

#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:

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

#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:

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

#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