Background-position - Trik CSS

Anonim

The background-positionproperti di CSS memungkinkan Anda untuk memindahkan gambar latar belakang (atau gradien) sekitar dalam wadah.

html ( background-position: 100px 5px; )

Ini memiliki tiga jenis nilai:

  • Nilai panjang (misalnya 100px 5px)
  • Persentase (mis. 100% 5%)
  • Kata kunci (mis. top right)

Nilai defaultnya adalah 0 0. Ini menempatkan gambar latar belakang Anda di kiri atas penampung.

Nilai panjangnya cukup sederhana: nilai pertama adalah posisi horizontal, nilai kedua adalah posisi vertikal. Jadi 100px 5pxakan memindahkan gambar 100px ke kanan dan lima piksel ke bawah. Anda dapat mengatur nilai panjang di px, em, atau salah satu dari nilai-nilai panjang CSS lainnya.

Persentase bekerja sedikit berbeda. Keluarkan topi matematika Anda: memindahkan gambar latar belakang sebesar X% berarti itu akan menyelaraskan titik X% pada gambar ke titik X% dalam wadah. Misalnya, 50%artinya akan menyelaraskan bagian tengah gambar dengan bagian tengah wadah. 100%berarti itu akan menyelaraskan piksel terakhir dari gambar dengan piksel terakhir dari wadah, dan seterusnya.

Kata kunci hanyalah jalan pintas untuk persentase. Lebih mudah untuk diingat dan ditulis top rightdaripada 100% 0, dan itulah mengapa kata kunci adalah suatu hal. Berikut adalah daftar kelima kata kunci dan nilai yang setara:

  • top: 0% secara vertikal
  • right: 100% secara horizontal
  • bottom: 100% vertikal
  • left: 0% secara horizontal
  • center: 50% horizontal jika horizontal belum ditentukan. Jika sudah maka ini diterapkan secara vertikal.

Menarik untuk dicatat bahwa tidak masalah urutan apa yang Anda gunakan untuk kata kunci: top centersama dengan center top. Anda hanya dapat melakukan ini jika Anda secara eksklusif menggunakan kata kunci. center 10%tidak sama dengan 10% center.

Demo

Demo ini menunjukkan contoh background-positionhimpunan dengan satuan panjang, persentase, dan kata kunci.

Lihat nilai posisi latar belakang Pena oleh CSS-Tricks (@ css-trick) di CodePen.

Mendeklarasikan Nilai

Anda dapat memberikan background-positionhingga empat nilai di browser modern (lihat tabel Dukungan Browser untuk detailnya).

Jika Anda mendeklarasikan satu nilai , nilai tersebut adalah offset horizontal. Browser menyetel ofset vertikal ke center.

Saat Anda mendeklarasikan dua nilai , nilai pertama adalah offset horizontal dan nilai kedua adalah offset vertikal.

Segalanya menjadi sedikit lebih rumit saat Anda mulai menggunakan tiga atau empat nilai, tetapi Anda juga mendapatkan kontrol lebih atas penempatan latar belakang Anda.

Sintaks tiga atau empat nilai bergantian antara kata kunci dan panjang atau unit persentase. Anda dapat menggunakan salah satu nilai kata kunci kecuali centerdalam background-positiondeklarasi tiga atau empat nilai .

Saat Anda menentukan tiga nilai , browser menginterpretasikan nilai keempat yang "hilang" sebagai 0. Berikut adalah contoh dari tiga nilai background-position:

#threevalues ( background-position: right 45px bottom; )

Ini memposisikan gambar latar belakang 45px dari kanan dan 0px dari bawah wadah.

Berikut adalah contoh dari empat nilai background-position :

#fourvalues ( background-position: right 45px bottom 20px; )

Ini menempatkan gambar latar belakang 45px dari kanan dan 20px dari bawah wadah.

Perhatikan urutan nilai dalam contoh di atas: kata kunci diikuti dengan satuan panjang. Nilai tiga atau empat background-positionharus mengikuti format tersebut, dengan kata kunci yang mendahului satuan panjang atau persentase.

Demo

Demo ini menyertakan contoh satu nilai, dua nilai, tiga nilai, dan empat nilai background-position.

Lihat Pen background-position 1, 2, 3, dan 4 nilai sintaks oleh CSS-Tricks (@ css-trick) di CodePen.

Terkait

  • background-attachment
  • klip latar belakang
  • warna latar belakang
  • gambar latar belakang
  • background-origin
  • ulangi latar belakang
  • background-size

Sumber Daya Lainnya

  • background-position dalam spesifikasi CSS3
  • background-position di MDN
  • Gambar Latar Belakang Offset

Dukungan Browser

Nilai-nilai dasar didukung di mana-mana. Sintaks empat nilai memiliki dukungan ini:

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome Firefox YAITU Tepi Safari
25 13 9 12 7

Ponsel / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4.4 7.0-7.1

Itu tingkat dukungan yang sama dengan properti background-position-xdan background-position-y.