Mempelajari CSS adalah langkah penting dalam dunia pengembangan web. Salah satu hal dasar yang akan sering kamu lakukan adalah mengubah latar belakang atau background suatu elemen. Artikel ini akan memandu kamu tentang berbagai cara untuk melakukannya menggunakan CSS, mulai dari warna solid hingga gambar yang kompleks.

Cara paling sederhana untuk mengubah latar belakang adalah dengan menggunakan warna solid. Kamu bisa menggunakan properti background-color. Ada beberapa cara untuk menentukan warnanya:

• Nama Warna: Kamu bisa menggunakan nama warna standar seperti red, blue, atau green. Contoh:
  CSS

  .elemen-saya {
    background-color: blue;
  }
  

• Nilai Hexadecimal (Hex): Ini adalah cara yang paling umum dan akurat untuk menentukan warna. Setiap warna direpresentasikan oleh kode 6 digit, seperti #FF5733. Contoh:
  CSS

  .elemen-saya {
    background-color: #FF5733;
  }
  

• Nilai RGB (Red, Green, Blue): Kamu bisa menentukan intensitas setiap warna primer dari 0 hingga 255. Contoh:
  CSS

  .elemen-saya {
    background-color: rgb(255, 87, 51);
  }
  

• Nilai RGBA (Red, Green, Blue, Alpha): Mirip dengan RGB, namun ditambahkan nilai alpha (transparansi) dari 0 (transparan penuh) hingga 1 (tidak transparan). Contoh:
  CSS

  .elemen-saya {
    background-color: rgba(255, 87, 51, 0.5); /* Semi-transparan */
  }
  

Mengubah Background Dengan Gambar

Selain warna, kamu juga bisa menggunakan gambar sebagai latar belakang. Properti yang digunakan adalah background-image. Kamu perlu menentukan lokasi gambar menggunakan fungsi url().

body {
  background-image: url('path/ke/gambar-saya.jpg');
}

Saat menggunakan gambar, kamu mungkin akan menghadapi beberapa masalah, seperti gambar yang berulang atau terlalu kecil. Untuk mengatasinya, ada beberapa properti tambahan yang bisa kamu gunakan:

• background-repeat: Mengontrol apakah gambar akan diulang atau tidak. Nilai yang umum digunakan adalah no-repeat (tidak diulang), repeat-x (diulang secara horizontal), dan repeat-y (diulang secara vertikal).
  CSS

  body {
    background-image: url('path/ke/gambar-saya.jpg');
    background-repeat: no-repeat;
  }
  

• background-position: Menentukan posisi awal gambar. Kamu bisa menggunakan kata kunci seperti center, top, bottom, atau kombinasi seperti center center. Kamu juga bisa menggunakan nilai persentase atau piksel.
  CSS

  body {
    background-image: url('path/ke/gambar-saya.jpg');
    background-position: center center;
  }
  

• background-size: Mengontrol ukuran gambar latar belakang. Ini sangat berguna untuk memastikan gambar pas di dalam elemen. Beberapa nilai yang sering dipakai adalah:
  • cover: Mengubah ukuran gambar agar menutupi seluruh elemen, mungkin akan ada bagian yang terpotong.
  • contain: Mengubah ukuran gambar agar muat di dalam elemen tanpa terpotong, mungkin akan menyisakan ruang kosong.
  CSS

  body {
    background-image: url('path/ke/gambar-saya.jpg');
    background-size: cover;
  }
  

Properti Shorthand background

Untuk mempermudah dan mempersingkat kode, kamu bisa menggabungkan semua properti di atas menjadi satu menggunakan properti shorthand background. Urutannya tidak terlalu ketat, tapi praktik yang baik adalah: [color] [image] [repeat] [attachment] [position].

body {
  background: #f0f0f0 url('path/ke/gambar-saya.jpg') no-repeat center center/cover;
}

Kode di atas mengatur background-color menjadi abu-abu terang, menambahkan background-image, memastikan gambar tidak berulang, memposisikannya di tengah, dan mengubah ukurannya menjadi cover. Menggunakan properti shorthand ini akan membuat kode CSS kamu lebih ringkas dan mudah dibaca.

Kesimpulan

Mengubah latar belakang dengan CSS adalah salah satu keterampilan dasar yang harus kamu kuasai. Dengan memahami properti seperti background-color, background-image, dan properti tambahan lainnya, kamu bisa membuat desain yang lebih menarik dan dinamis. Selamat mencoba! 🚀