Background Position

Ukuran gambar sudah bisa kita atur; sekarang giliran posisinya. background-position menentukan di titik mana gambar dipasang di dalam kotaknya, dan nilainya menjadi krusial ketika gambar lebih besar dari ruang yang tersedia — pada cover, posisi inilah yang memutuskan bagian mana yang tetap terlihat dan bagian mana yang terpotong. Nilai default-nya 0% 0%, alias pojok kiri atas, yang sering membuat gambar tampak “menempel kaku” bila tidak kita atur. Chapter ini membahas tiga cara menuliskan posisi dan satu pola desain yang bergantung penuh padanya.

Kata Kunci Sembilan Posisi #

Kata kunci horizontal (left, center, right) dapat dipadukan dengan kata kunci vertikal (top, center, bottom) — total sembilan kombinasi. Bila hanya satu kata kunci yang ditulis, sumbunya otomatis diisi center.

.kop-surat {
  background-image: url("logo.svg");
  background-repeat: no-repeat;
  background-position: right top;
}

Kata kunci mudah dibaca dan tidak memerlukan hitungan, sehingga pas untuk penempatan yang memang mengikuti tepi.

Persentase: Menyelaraskan Titik yang Sama #

Makna persen di sini sering disalahpahami: X% menyelaraskan titik X% milik gambar dengan titik X% milik kotak. Jarak geser yang dihasilkan browser dapat dirumuskan singkat: (ukuran kotak − ukuran gambar) × X%.

• 0% — tepi kiri gambar bertemu tepi kiri kotak.
• 50% — titik tengah gambar bertemu titik tengah kotak; inilah alasan center selalu benar-benar di tengah.
• 100% — tepi kanan gambar bertemu tepi kanan kotak.

Perhatikan konsekuensi rumus itu: bila ukuran gambar sama dengan ukuran kotak, selisihnya nol dan semua persen menghasilkan posisi yang sama. Persen hanya “bekerja” ketika kedua ukurannya berbeda — tepat kondisi yang terjadi pada gambar ber-cover.

Empat penulisan posisi pada gambar yang sama:

Pada bingkai 80% 20%, pergeseran horizontalnya (lebar kotak − lebar gambar) × 80% dan vertikalnya (tinggi kotak − tinggi gambar) × 20% — itulah sebabnya wajah mendekati pojok kanan atas.

Panjang dari Sudut Kiri Atas #

Bentuk ketiga memakai satuan panjang, dihitung dari pojok kiri atas kotak:

.lencana {
  background-position: 24px 16px;   /* 24px dari kiri, 16px dari atas */
}

.lencana-tergeser {
  background-position: -12px -8px;  /* nilai negatif: tepi ikut terpotong */
}

Nilai negatif menggeser gambar keluar dari kotak — inilah sebabnya tepi kiri dan atas .lencana-tergeser ikut terpotong.

Dua nilai dibaca berurutan horizontal lalu vertikal, dan kata kunci boleh dicampur dengan panjang dalam bentuk empat nilai — right 24px top 16px berarti 24 piksel dari kanan dan 16 piksel dari atas.

Focal Point: Pasangan Wajib cover #

cover selalu memotong sesuatu; background-position menentukan apa yang selamat dari pemotongan itu. Pada foto potret, wajah biasanya berada di sepertiga atas bingkai, sehingga posisi center top mempertahankannya:

.hero-potret {
  min-height: 360px;
  background-image: url("potret.svg");
  background-size: cover;
  background-position: center top; /* wajah tetap di dalam bingkai */
}

Potret yang sama dengan dua posisi berbeda:

Pola yang sama berlaku umum: pilih kata kunci atau persen yang menahan bagian penting gambar agar tetap berada di dalam kotak.

Kesalahan Umum #

Ringkasan #

background-position memindahkan gambar di dalam kotaknya lewat kata kunci, persen, atau panjang — dengan persen yang menyelaraskan titik yang sama pada gambar dan kotak. Dipadukan dengan cover, posisi ini menjadi kendali atas focal point: bagian gambar mana yang tetap terlihat. Satu pertanyaan tersisa pada keluarga background: bagaimana browser mengulang gambar yang lebih kecil dari kotaknya. Chapter Background Repeat menjawabnya, lengkap dengan dua nilai penata yang jarang diketahui.