Background Size

Gambar background tidak otomatis menyesuaikan ukuran kotaknya. Secara default browser memakai ukuran asli gambar (intrinsic size), lalu mengulangnya untuk mengisi ruang yang tersisa — perilaku yang nyaman untuk pola, tetapi bermasalah untuk foto dan banner yang ukurannya jarang pas dengan kotak. Property background-size memberi kita kendali penuh: mengisi penuh dengan risiko terpotong, menampilkan utuh dengan risiko ruang kosong, atau menetapkan ukuran pasti. Tiga chapter berikutnya memakai satu gambar latar yang sama agar kita bisa membandingkan efek tiap property secara langsung.

auto: Ukuran Intrinsik #

auto adalah nilai default: gambar dipasang pada ukuran aslinya, lalu berulang mengisi kotak.

.kotak-pola {
  width: 240px;
  height: 80px;
  background-image: url("petak-80.svg"); /* SVG berukuran 80x80 */
  background-size: auto;
}

Demo berikut memasang tile SVG 80×80 pada kotak selebar 240 piksel:

Ukuran intrinsik ini datang dari atribut width/height pada SVG atau dimensi asli gambar raster. Perilaku ini pas untuk pola kecil, tetapi tidak untuk foto latar — ukuran aslinya nyaris tidak pernah sama dengan ukuran kotaknya.

cover: Mengisi Penuh, Sisanya Dipotong #

.hero {
  min-height: 320px;
  background-image: url("pemandangan.svg");
  background-size: cover;
  background-repeat: no-repeat;
}

Cara kerja cover: gambar diperbesar sampai kedua dimensi kotak terisi, dengan rasio aspek tetap terjaga. Konsekuensinya, dimensi gambar yang melampaui kotak akan terpotong. Bagian mana yang hilang ditentukan oleh background-position — topik chapter berikutnya.

contain: Tampil Utuh, Bisa Ada Ruang Sisa #

.kartu-produk {
  height: 160px;
  background-color: #f4fbf7;
  background-image: url("pemandangan.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

Ruang kosong pada satu dimensi itu memperlihatkan background-color di baliknya.

Cara kerja contain: gambar diskalakan sampai sisi terpanjangnya pas dengan kotak, rasio tetap terjaga, dan tidak ada bagian yang hilang. Ruang sisa inilah yang disebut letterbox — istilah yang dipinjam dari strip gelap di atas-bawah layar bioskop. Perhatikan pula jebakan kecilnya: tanpa background-repeat: no-repeat, ruang kosong itu akan terisi tile berulang.

Perbandingan cover dan contain #

Keduanya selalu menjaga rasio aspek. Kalau rasio justru boleh berubah — misalnya tekstur yang melar penuh — kita butuh nilai eksplisit.

Perbedaannya langsung terlihat pada dua bingkai yang sama:

Nilai Eksplisit: Panjang dan Persen #

.lencana {
  background-image: url("bintang.svg");
  background-size: 48px;      /* lebar 48px, tinggi mengikuti rasio */
  background-repeat: no-repeat;
}

.split-latar {
  background-image: url("tekstur.svg");
  background-size: 50% 100%;  /* setengah lebar, penuh tinggi */
}

Bintang pada .lencana berukuran 48 piksel dengan tinggi mengikuti rasio aslinya; tekstur pada .split-latar mengisi separuh lebar kotak dan seluruh tingginya:

Aturan membaca nilainya:

• Dua nilai dibaca sebagai lebar lalu tinggi.
• Satu nilai berarti lebar saja; tinggi otomatis mengikuti rasio — setara dengan menulis auto di posisi kedua.
• Persen dihitung terhadap area background elemen (area penempatan, default padding-box), bukan terhadap ukuran gambar.

Hati-hati dengan Shorthand background #

Shorthand background menerima nilai size, tetapi dengan satu syarat: ia harus ditulis setelah posisi dan dipisah garis miring. Tanpa itu, nilai seperti cover tidak dikenali:

.hero-ringkas {
  background: #14503a url("pemandangan.svg") center / cover no-repeat;
}

Hasilnya sama seperti menulis keempat property longhand.

Jebakan yang lebih sering terjadi: menulis background-size: cover lalu ditimpa shorthand background sesudahnya, karena shorthand mengembalikan seluruh sub-property yang tidak disebut ke nilai awalnya. Aturan amannya: tulis shorthand lebih dulu, longhand sesudahnya.

Kesalahan Umum #

Ringkasan #

background-size menentukan seberapa besar gambar digambar: auto mengikuti ukuran intrinsik, cover mengisi penuh dengan risiko terpotong, contain menjaga gambar utuh dengan risiko ruang kosong, dan nilai eksplisit memberi kendali pasti atas lebar dan tingginya. Namun mengatur ukuran saja belum selesai — ketika gambar terpotong, kita perlu memilih bagian mana yang tetap terlihat. Tugas itu diserahkan kepada background-position pada chapter berikutnya.