Beranda / CSS / Pemrograman / Web

Memahami CSS Background Image Repeat dan Position (Tutorial CSS Part 12)

Oleh Sopyan Posting Komentar
Gambar 12.0 : Logo CSS

Mengatur tampilan latar belakang (background) adalah salah satu aspek penting dalam desain web. Dalam artikel ini, kita akan membahas dua properti penting dari CSS yaitu background-repeat dan background-position. Kedua properti ini membantu kamu mengatur bagaimana gambar latar belakang muncul dan diposisikan di elemen HTML.

1. CSS background-repeat

Properti background-repeat digunakan untuk mengatur apakah gambar latar belakang akan diulang (repeat) di area elemen atau tidak.

Nilai-nilai umum:

  • repeat: Gambar akan diulang secara horizontal dan vertikal (default).
  • repeat-x: Gambar hanya diulang secara horizontal.
  • repeat-y: Gambar hanya diulang secara vertikal.
  • no-repeat: Gambar tidak akan diulang sama sekali.
  • space: Gambar akan diulang dan diberi jarak merata tanpa pemotongan.
  • round: Gambar akan diubah ukurannya agar pas dan bisa diulang dengan rapi.

Contoh:

.box {
  background-image: url("pattern.png");
  background-repeat: repeat; /* Default */
}

Contoh menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 300px;
      height: 200px;
      background-image: url("pattern.png");
      background-repeat: repeat; /* Default */
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Hasilnya:

Contoh CSS background-repeat
Gambar 12.1 : Contoh CSS background-repeat

2. CSS background-repeat: no-repeat

Jika kamu hanya ingin menampilkan gambar latar satu kali tanpa pengulangan, gunakan no-repeat.

Contoh:

.header {
  background-image: url("logo.png");
  background-repeat: no-repeat;
}

Gambar hanya akan muncul sekali dan sisanya akan dibiarkan kosong atau diisi warna latar belakang default.

Contoh menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    .header {
      width: 300px;
      height: 200px;
      background-image: url("logo.png");
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <div class="header"></div>
</body>
</html>

Hasilnya:

Contoh CSS background-repeat: no-repeat;
Gambar 12.2 : Contoh CSS background-repeat: no-repeat;

3. CSS background-position

Properti background-position menentukan posisi gambar latar belakang di dalam elemen.

Nilai-nilai umum:

  • Kata kunci: top, bottom, left, right, center
  • Kombinasi: top left, center center, dll.
  • Nilai spesifik: 20px 10px, 50% 50%, dll.

Contoh:

.banner {
  background-image: url("banner.jpg");
  background-repeat: no-repeat;
  background-position: center center;
}

Contoh menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    .banner {
      width: 300px;
      height: 200px;
      background-image: url("banner.jpg");
      background-repeat: no-repeat;
      background-position: center center;
    }
  </style>
</head>
<body>
  <div class="banner"></div>
</body>
</html>

Hasilnya:

Contoh CSS background-position
Gambar 12.3 : Contoh CSS background-position

4. Tabel Ringkasan: CSS Background Repeat dan Position

Properti Deskripsi Contoh
background-repeat: repeat Mengulang gambar horizontal dan vertikal background-repeat: repeat;
background-repeat: no-repeat Gambar hanya ditampilkan sekali background-repeat: no-repeat;
background-repeat: repeat-x Hanya diulang secara horizontal background-repeat: repeat-x;
background-repeat: repeat-y Hanya diulang secara vertikal background-repeat: repeat-y;
background-position: top left Gambar diposisikan di kiri atas background-position: top left;
background-position: center center Gambar berada di tengah background-position: center center;
background-position: 50% 50% Gambar di tengah menggunakan persentase background-position: 50% 50%;
background-position: 20px 10px Gambar diposisikan menggunakan pixel background-position: 20px 10px;

Kesimpulan

Menggunakan background-repeat dan background-position dengan bijak akan memberikan kontrol penuh atas bagaimana gambar latar belakang ditampilkan dalam desain web kamu. Gunakan pengulangan saat perlu, dan pastikan posisi gambar sesuai dengan estetika dan fungsi desain.

Semoga artikel ini bermanfaat! Kalau kamu tertarik, kita bisa lanjut bahas background-size dan background-attachment di artikel berikutnya.

Posting Komentar untuk "Memahami CSS Background Image Repeat dan Position (Tutorial CSS Part 12)"