Background Repeat

Bila gambar lebih kecil dari kotaknya, browser secara default menata ulang gambar itu membentuk ubin (tile) sampai seluruh kotak terisi. Perilaku ini adalah fondasi semua pola berulang — garis grid, titik-titik, tekstur halus — tetapi tile yang terpotong di tepi sering membuat pola tampak berantakan. CSS menyediakan lima nilai background-repeat: tiga yang klasik untuk mengulang atau menahan gambar, dan dua nilai penata yang menata jarak maupun skala tile agar pas dengan kotak. Kita bahas semuanya, lalu menyusun resep pola berulang yang rapi.

repeat: Perilaku Default #

repeat menggambar tile mulai dari pojok kiri atas, menyamping lalu ke bawah, sampai kotak penuh. Tile di tepi boleh terpotong:

.pola-standar {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='9' fill='%231f6f54'/%3E%3C/svg%3E");
}

Bila lebar kotak bukan kelipatan 40 piksel, lingkaran di tepi kanan dan bawah terpotong sebagian — ciri khas repeat yang perlu diantisipasi.

no-repeat dan Pengulangan Satu Arah #

no-repeat adalah pasangan wajib cover dan contain dari dua chapter sebelumnya, sedangkan repeat-x dan repeat-y praktis untuk ornamen satu arah:

.strip-atas {
  background-image: url("garis-dekoratif.svg");
  background-repeat: repeat-x;
}

Ornamen seperti itu begini bentuknya:

space: Tanpa Potongan, Sisa Jadi Jarak #

Nilai space memasang tile sebanyak mungkin tanpa satu pun terpotong, lalu membagi ruang sisa secara merata menjadi jarak antartile.

.pola-berjarak {
  background-repeat: space;
}

Bila kotak terlalu sempit untuk dua tile, space memasang satu tile tanpa jarak — aturannya konsisten: jumlah tile yang utama adalah yang tidak terpotong.

round: Menskalakan Tile agar Pas #

Nilai round mengambil pendekatan berbeda: jumlah tile ditentukan lebih dulu, lalu setiap tile diskalakan agar jumlah itu pas mengisi kotak.

.pola-pas {
  background-repeat: round;
}

Pada kotak 230 piksel, enam tile disesuaikan menjadi sekitar 38 piksel agar jumlahnya bulat tanpa potongan. Konsekuensinya, bentuk dalam tile bisa berubah sedikit karena skala horizontal dan vertikal dihitung terpisah. Kelebihannya: saat ukuran kotak berubah, browser menghitung ulang jumlah dan skala tile, sehingga pola selalu pas tanpa potongan.

Resep Pola Berulang dengan Data URI #

Pola tiling yang rapi punya tiga bahan: tile berukuran tetap, satu bentuk di tengah tile, dan latar tile yang transparan agar warna dasar datang dari background-color — sehingga tema mudah diganti tanpa menyentuh gambar:

.pola-titik {
  background-color: #f4fbf7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='9' fill='%231f6f54'/%3E%3C/svg%3E");
}

Tile yang sama dipasang dengan tiga nilai pengulangan berbeda:

Untuk pola garis atau grid, bentuknya memang perlu menyentuh tepi tile — yang penting posisinya simetris agar sambungan antartile tidak terlihat.

Kesalahan Umum #

Ringkasan #

repeat menata gambar membentuk ubin, no-repeat menahannya menjadi satu, space mengulang tanpa potongan dengan jarak merata, dan round menskalakan tile agar jumlahnya pas. Bersama background-size dan background-position, kita kini menguasai sepenuhnya cara browser menggambar satu gambar latar. Chapter berikutnya menyusuri jenis gambar yang paling sering dipakai sebagai latar modern: gradien, dimulai dari linear-gradient.