Beranda / CSS / Pemrograman / Web

CSS Background Shorthand: Cara Cepat Atur Background dengan Santai (Tutorial CSS Part 14)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 14.0 : Logo CSS

Kalau kamu sering ngulik tampilan web, pasti udah nggak asing lagi sama yang namanya background di CSS. Mulai dari warna, gambar, posisi, sampai pengulangan background—semuanya bisa diatur satu per satu. Tapi, tahu nggak sih, semua itu bisa kamu gabungin dalam satu baris kode aja?

Yap, kenalin: CSS background shorthand. Dengan properti ini, kamu bisa bikin kode lebih ringkas dan rapi. Yuk, kita kupas tuntas cara pakainya dan semua properti yang bisa digabungin!

Apa Itu CSS background Shorthand?

Shorthand adalah cara singkat buat nulis beberapa properti CSS sekaligus dalam satu baris. Nah, background shorthand ini dipakai buat mengatur semua properti background—mulai dari warna sampai ukuran gambar—dalam satu properti tunggal.

Contoh:

background: #f2f2f2 url('gambar.jpg') no-repeat center/cover;

Penjelasan dari kode di atas:

  • #f2f2f2 → Warna latar belakang
  • url('gambar.jpg') → Gambar latar
  • no-repeat → Gambar tidak diulang
  • center/cover → Posisi tengah, ukuran cover

Super praktis, kan?

Contoh Implementasi dengan Internal CSS:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh Background Shorthand</title>
  <style>
    .kotak {
      width: 300px;
      height: 200px;
      background: #f2f2f2 url('gambar.jpg') no-repeat center/cover;
      border: 2px solid #ccc;
    }
  </style>
</head>
<body>

  <div class="kotak"></div>

</body>
</html>

Hasilnya:

Contoh CSS Background Shorthand
Gambar 14.1 : Contoh CSS Background Shorthand

Kalau kamu buka file HTML di atas, kamu bakal lihat kotak dengan gambar sebagai background, posisi tengah, dan ukurannya menyesuaikan kontainer. Sederhana tapi powerful 💪

Urutan Umum Properti background

Meskipun kamu bisa nulis shorthand ini dengan urutan yang fleksibel, ada urutan "ideal" supaya nggak bikin bingung, yaitu:

background: [background-color] [background-image] [background-position] / [background-size] [background-repeat] [background-attachment] [background-origin] [background-clip];

Tapi santai aja, kamu nggak harus isi semuanya. Kalau cuma mau ganti warna dan gambar doang? Boleh! CSS nggak akan marah 😄

Tabel Semua Properti Background CSS

Properti Fungsi
background-color Menentukan warna latar belakang
background-image Menambahkan gambar sebagai latar
background-repeat Mengatur apakah gambar diulang atau tidak
background-position Menentukan posisi gambar di elemen
background-size Mengatur ukuran gambar (misalnya cover, contain, auto)
background-attachment Menentukan apakah gambar ikut scroll atau tetap (contoh: fixed)
background-origin Menentukan dari mana background mulai (border-box, padding-box, dll)
background-clip Mengatur area gambar latar (mirip origin, tapi untuk clipping)
background Shorthand dari semua properti di atas

Tips Menggunakan Shorthand dengan Aman

  • Nggak semua properti harus kamu isi. Isi sesuai kebutuhan aja.
  • Kalau pakai background-size, harus dipisahkan pakai / dari background-position.
  • Lebih baik urutkan properti sesuai struktur umum biar nggak bikin bingung diri sendiri (atau tim).

Penutup

Dengan pakai background shorthand, kamu bisa bikin kode lebih hemat tempat dan gampang dibaca. Cukup paham urutannya dan tahu fungsi tiap properti, kamu udah bisa main-main dengan background sesuka hati.

Selamat ngoding dan semoga background-mu makin keren! 🎨💻

Posting Komentar untuk "CSS Background Shorthand: Cara Cepat Atur Background dengan Santai (Tutorial CSS Part 14)"