Background Repeat CSS

Secara default, properti background-image mengulang gambar secara horizontal dan vertikal.

Beberapa gambar harus diulang hanya secara horizontal atau vertikal, atau akan terlihat aneh.

Contoh

body {
  background-image: url("gradient_bg.png");
}

Jika gambar di atas diulang hanya secara horizontal (background-repeat: repeat-x;), latar belakang akan terlihat lebih baik.

Contoh

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

Tips: Untuk mengulang gambar secara vertikal, atur background-repeat: repeat-y.

background-repeat: no-repeat

Untuk menampilkan gambar background (latar belakang) hanya sekali juga ditentukan oleh properti background-repeat.

Contoh

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}

Pada contoh di atas, gambar latar ditempatkan di tempat yang sama dengan teks.

background-position

Properti background-position digunakan untuk menentukan posisi gambar background (latar belakang).

Contoh

Posisikan gambar latar belakang di pojok kanan atas:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Sumber referensi: w3shools.com