Cara Mengatur Repeat dan Position untuk Gambar Background di CSS

Halo teman-teman!
Setelah sebelumnya kita belajar cara menambahkan gambar sebagai background, sekarang kita masuk ke bagian yang nggak kalah penting, yaitu cara mengontrol pengulangan dan posisi gambar background. Di sini kita akan belajar dua properti utama, yaitu background-repeat dan background-position.

Dengan dua properti ini, kita bisa menentukan apakah gambar background akan diulang atau tidak, dan di bagian mana gambar tersebut muncul dalam elemen HTML.

Mengenal background-repeat

Secara default, gambar background akan diulang secara horizontal dan vertikal di seluruh area elemen. Nah, properti background-repeat ini memungkinkan kita mengubah perilaku default tersebut sesuai kebutuhan.

Contoh dasar:

background-repeat: repeat;

Nilai-nilai yang bisa digunakan:

• repeat → gambar diulang secara horizontal dan vertikal (default)

• no-repeat → gambar tidak diulang

• repeat-x → gambar hanya diulang horizontal

• repeat-y → gambar hanya diulang vertikal

Contoh penggunaan:

body {
  background-image: url('pola.png');
  background-repeat: repeat-x;
}

Kalau kamu cuma ingin gambar mengalir di sisi lebar layar, cukup pakai repeat-x. Mau tampil satu kali saja? Tinggal ubah ke no-repeat.

Mengenal background-position

Posisi gambar juga penting banget, apalagi kalau kamu ingin gambar tampil hanya sekali dan di lokasi tertentu. Dengan background-position, kamu bisa menempatkan gambar di kanan, kiri, atas, bawah, atau tengah. Bisa juga pakai nilai pixel atau persen.

Contoh:

background-position: right top;

Gabungkan dengan background-repeat: no-repeat;, maka kamu punya kontrol penuh:

body {
  background-image: url('hero.jpg');
  background-repeat: no-repeat;
  background-position: center center;
}

Kombinasi Kedua Properti

Kombinasikan background-repeat dan background-position untuk mengatur layout gambar dengan rapi dan proporsional:

.container {
  background-image: url('icon.png');
  background-repeat: no-repeat;
  background-position: left bottom;
}

Pakai Persen dan Pixel Juga Bisa

Kamu juga bisa pakai ukuran absolut seperti pixel atau relatif seperti persen:

header {
  background-image: url('logo.png');
  background-repeat: no-repeat;
  background-position: 20px 10px;
}

footer {
  background-position: 50% 100%;
}

Tips Supaya Background Lebih Optimal

• Pakai no-repeat untuk elemen dekoratif agar nggak ramai

• Posisi center center cocok banget buat gambar utama

• Uji desain kamu di layar kecil dan besar

• Coba juga gabungkan dengan background-size biar hasilnya makin pas

Yuk Coba Sekarang!

Sekarang giliran kamu coba sendiri. Gunakan background-repeat dan background-position untuk menata gambar di halamanmu. Kamu bisa mulai dari pattern sederhana, lalu eksplorasi posisi kanan atas, tengah, atau kiri bawah. Rasakan langsung perbedaan tampilannya!

Di materi selanjutnya, kita akan bahas properti CSS berikutnya yaitu background-attachment, untuk membuat gambar background tetap diam saat halaman digulir.

Baca juga