Cara Menyingkat Properti Background dengan CSS Shorthand

Home » CSS

Halo teman-teman!
Setelah sebelumnya kita bahas tentang bagaimana gambar background bisa tetap diam saat di-scroll dengan background attachment, sekarang kita akan belajar cara menyingkat semua properti background jadi satu baris kode saja menggunakan background shorthand.

Yup, kalau sebelumnya kita nulis satu-satu mulai dari background-color, background-image, background-repeat, dan seterusnya... dengan shorthand semuanya bisa disatukan dalam satu baris!

Apa Itu Background Shorthand?

Background shorthand adalah cara menuliskan beberapa properti background sekaligus hanya dalam satu deklarasi. Ini bikin kode CSS jadi lebih bersih, cepat dibaca, dan mudah diatur.

Format umumnya seperti ini:

background: <color> <image> <position>/<size> <repeat> <attachment>;

Semua properti ini bisa kamu masukkan:

background-color
background-image
background-position
background-size
background-repeat
background-attachment
background-origin (opsional)
background-clip (opsional)

Tapi nggak harus semuanya kamu tulis. Kamu bisa sesuaikan dengan kebutuhan.

Contoh Background Shorthand Dasar

body {
  background: #f0f0f0 url('pola.png') no-repeat right top;
}

Kode di atas akan memberikan:

warna latar belakang: #f0f0f0
gambar background: pola.png
pengulangan: tidak (no-repeat)
posisi gambar: kanan atas

Contoh Background Shorthand Lengkap

.hero {
  background: #ffffff url('banner.jpg') center/cover no-repeat fixed;
}

Penjelasannya:

Warna: putih (#ffffff)
Gambar: banner.jpg
Posisi: tengah
Ukuran: cover
Ulangi: tidak (no-repeat)
Perilaku scroll: tetap (fixed)

Tips Saat Menggunakan Background Shorthand

Urutan penting! Pastikan posisi dan size ditulis dengan slash (/) seperti center/cover
Jika ada properti yang tidak kamu tulis, browser akan memakai nilai default
Gunakan shorthand jika kamu ingin menuliskan semua atau sebagian besar properti background
Kalau cuma mau ubah satu properti saja, lebih baik gunakan properti individual supaya nggak mereset yang lain

Kenapa Harus Pakai Shorthand?

Lebih singkat dan hemat baris kode
Membantu menjaga konsistensi styling
Mudah dipahami saat membaca ulang kode
Cocok banget buat styling komponen yang butuh banyak properti background sekaligus

Yuk Coba Sendiri!

Sekarang saatnya kamu buka file CSS kamu, cari bagian yang punya banyak properti background, dan coba ubah jadi shorthand! Rasakan perbedaannya — lebih bersih, lebih cepat, lebih enak dibaca.

Di materi selanjutnya, kita akan mulai masuk ke topik baru yaitu JavaScript — bahasa pemrograman yang bikin halaman web kita bisa berinteraksi lebih dinamis.