Pengulangan Latar Belakang CSS

CSS background-repeat

Secara default,background-image Properti mengulangi gambar di arah horisontal dan vertikal.

Beberapa gambar hanya cocok untuk diulangi secara horisontal atau vertikal, jika tidak mereka akan terlihat aneh, seperti yang ditunjukkan di bawah ini:

Contoh

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

Coba Sendiri

Jika gambar di atas hanya mengulangi secara horisontal (background-repeat: repeat-x;) maka latar belakang akan terlihat lebih baik:

Contoh

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

Coba Sendiri

Petunjuk:Untuk mengulangi gambar secara vertikal, silakan atur background-repeat: repeat-y;。

CSS background-repeat: no-repeat

background-repeat Properti ini juga dapat menentukan untuk hanya menampilkan gambar latar belakang sekali:

Contoh

Gambar latar belakang hanya muncul sekali:

body {
  background-image: url("tree.png");
  background-repeat: tak berulang;
}

Coba Sendiri

Dalam contoh di atas, gambar latar belakang dan teks ditempatkan di lokasi yang sama. Kita ingin mengubah lokasi gambar untuk menghindari gangguan terlalu banyak gambar terhadap teks.

background-position CSS

background-position Properti digunakan untuk menentukan lokasi gambar latar belakang.

Contoh

Letakkan gambar latar belakang di pojok kanan atas:

body {
  background-image: url("tree.png");
  background-repeat: tak berulang;
  background-position: kanan atas;
}

Coba Sendiri