Jika menentukan background dengan gambar, properti background-repeat menentukan apakah gambar diulang dan bagaimana. Pengulangan gambar latar terjadi setelah ukuran dan posisi.

Suatu gambar dapat diulangi secara vertikal, horizontal, baik secara vertikal maupun horizontal, atau dapat diatur untuk tidak mengulang sama sekali.

Jika gambar latar belakang diulang, mungkin saja beberapa ubinnya terpotong jika tidak cocok beberapa kali ke dalam area penentuan posisi latar belakang elemen. Sebelum CSS3, tidak ada yang bisa dilakukan pengembang untuk mencegahnya. Tetapi di modul latar belakang dan perbatasan level 3, dua nilai baru telah diperkenalkan yang memungkinkan pengembang untuk mencegah kliping gambar dengan baik men-rescaling gambar itu sehingga cocok dengan jumlah keseluruhan kali, atau mengulang gambar sesering mungkin sesuai dengan area tanpa terpotong, dan kemudian spasi gambar untuk mengisi area.

Properti dapat mengambil nilai tunggal atau dua nilai kata kunci. Nilai menentukan apakah dan bagaimana gambar diulang secara horizontal dan vertikal.

Jika satu nilai tunggal digunakan, nilai tersebut dianggap sebagai singkatan untuk sintaks dua nilai dan nilai lainnya ditetapkan oleh browser (lihat bagian Nilai di bawah untuk detail). Jika dua nilai kata kunci digunakan, maka yang pertama adalah untuk arah horizontal dan yang kedua untuk arah vertikal.

Properti background-repeat juga dapat mengambil nilai yang dipisahkan koma sehingga ketika elemen memiliki lebih dari satu gambar latar belakang, setiap nilai diterapkan ke gambar latar belakang yang sesuai (nilai pertama untuk gambar pertama, nilai kedua untuk gambar kedua, dan sebagainya). di).

Trivia & Catatan

Semua ubin mencakup area isi, bantalan dan batas kotak. Perbatasan yang ditetapkan pada elemen biasanya menumpuk di atas gambar latar belakang elemen.

Official Syntax

 

Values

Saat hanya menggunakan satu nilai, artinya adalah sebagai berikut:

repeat-x: Gambar latar diulang secara horizontal tetapi tidak secara vertikal.

repeat-y: Gambar latar diulang secara vertikal tetapi tidak secara horizontal.

repeat: gambar latar diulang secara horizontal dan vertikal. Ini adalah nilai default.

space: Spasi ditambahkan antara gambar yang diulang pada sumbu horizontal dan juga pada sumbu vertikal.

no-repeat: Gambar latar belakang tidak diulang sama sekali.

WhatsApp chat