Cara Menggunakan CSS Ukuran Latar Belakang dan Posisi Latar Belakang – beragampengetahuan – Beragampengetahuan

Kita dapat melakukan banyak hal dengan properti latar belakang CSS.Pada artikel ini, kita akan mengeksplorasi cara menggunakan background-size properti untuk mengatur ukuran gambar latar belakang, kami juga akan menjelajahi opsi untuk memposisikan gambar latar belakang background-position.

konfigurasi

Untuk demo gambar latar belakang kami, kami akan menggunakan gambar berikut (Oia, Santorini, Yunani).Ukuran alaminya adalah 400px melewati 600px.

Inilah demo CodePen dasar kami, yang berisi <div> terkonsentrasi di tengah <article>. (Anda dapat membaca lebih lanjut tentang pemusatan elemen dengan CSS Grid di sini.) pengukuran div 300px melewati 200px.

lihat pena
Ukuran Latar Belakang CSS: Templat beragampengetahuan (@beragampengetahuan)
di CodePen.

Div memiliki latar belakang kuning, dan gambar latar belakang akan berada di atas latar belakang kuning itu (karena warna latar selalu berada di bawah gambar latar apa pun).

Jika sekarang kita hanya menambahkan gambar sebagai latar belakang, kita akan melihat bahwa hanya sebagian dari gambar yang terlihat. Ini karena gambarnya lebih lebar dan lebih tinggi daripada div kuning.

lihat pena
Ukuran Latar Belakang CSS: Templat beragampengetahuan (@beragampengetahuan)
di CodePen.

Gambar di bawah menunjukkan bagian dari gambar latar belakang yang tidak terlihat di luar div.

Ini jelas bukan hasil yang sangat memuaskan, jadi mari kita lihat caranya background-size Properti dapat membantu kita.

Gunakan background-size untuk mengatur ukuran background

Selama bertahun-tahun, properti baru telah tersedia untuk memanipulasi gambar latar belakang di CSS, termasuk background-size. Ini memungkinkan kita untuk mengatur ukuran gambar latar belakang, seperti yang selalu dapat kita lakukan dengan gambar sebaris.

ini background-size Atribut memberikan pilihan dua nilai kata kunci – cover Dan contain – bisa juga mengambil nilai numerik dengan satuan, mis. px, %, embersama auto. Mari kita lihat setiap contoh.

Ukuran Latar Belakang: Berisi

ini contain value memaksa seluruh gambar untuk masuk ke dalam wadahnya, meskipun ukuran aslinya lebih besar dari wadahnya.

lihat pena
Ukuran Latar Belakang CSS: Template dengan Gambar beragampengetahuan (@beragampengetahuan)
di CodePen.

Dalam contoh ini, kami menambahkan CSS berikut:

div {
  background-size: contain;
  background-repeat: no-repeat;
}

Secara default, gambar latar belakang akan berulang sebanyak yang diperlukan untuk mengisi wadah background-repeat: no-repeat; HENTIKAN PERILAKU INI. (Coba hapus untuk melihat gambar duplikat.)

Ukuran Latar Belakang: Sampul

ini cover Nilai memaksa gambar untuk sepenuhnya menutupi area penampung tanpa merusak gambar. Karena gambar kita memiliki dimensi yang berbeda dari div, beberapa di antaranya tidak terlihat.

lihat pena
Ukuran latar belakang CSS: Disertakan oleh beragampengetahuan (@beragampengetahuan)
di CodePen.

Kita melihat lebar penuh gambar di sini, tetapi bukan tinggi penuh. Secara default, sudut kiri atas gambar latar belakang ditempatkan di sudut kiri atas div, jadi kita tidak dapat melihat bagian bawah gambar, seperti yang ditunjukkan pada gambar di bawah.

ketika kita melihat background-position properti, kita akan belajar bagaimana menentukan bagian mana dari gambar yang terlihat.

ukuran latar belakang dan nilai lainnya

Mari kita lihat nilai lain apa yang bisa kita gunakan background-size Properti.

Jika kita menambahkan nilai persentase 50%dan inilah yang terjadi:

lihat pena
Ukuran latar belakang CSS: Diganti oleh beragampengetahuan (@beragampengetahuan)
di CodePen.

Gambar latar sekarang menjadi 50% dari lebar div, tetapi masih lebih tinggi dari div, sehingga bagian bawah gambar disembunyikan. Oleh karena itu, nilai persentase diterapkan pada sumbu x. Sumbu y defaultnya adalah autoyang berarti gambar mempertahankan rasio tinggi lebar alaminya.

Jika kita menambahkan dua nilai persentase (50% 50%):

lihat pena
Ukuran latar belakang CSS, sebagai nilai % tunggal yang disediakan oleh beragampengetahuan (@beragampengetahuan)
di CodePen.

Wow! Gambar sekarang menutupi 50% lebar dan 50% tinggi div, yang berarti rasio aspeknya terdistorsi dengan jelas.

Kami mendapatkan sesuatu seperti ini jika kami bertukar % untuk px atau nilai satuan lainnya.Sebagai contoh, kita dapat melakukan sesuatu seperti background-size: 50px 50pxatau background-size: 200px 3em dll. Kita dapat bereksperimen dengan nilai-nilai ini di pena di atas… meskipun ini jarang berguna karena ini mendistorsi gambar latar kecuali kita memilih nilai dengan hati-hati yang mempertahankan rasio aspeknya.

Yang lebih berguna untuk menyempurnakan pengaturan gambar latar belakang kita adalah background-position properti, jadi mari kita lihat selanjutnya.

Gunakan background-position untuk mengatur posisi gambar latar belakang

Kami melihat di atas bahwa secara default, pojok kiri atas gambar latar ditempatkan di pojok kiri atas wadahnya.Artinya, default background-position Pengaturannya terlihat seperti ini:

div {
  background-position: left top;
}

ini background-position properti memberi kita kontrol yang baik di mana gambar latar belakang ditempatkan, dan bekerja dengan background-size: coverjadi kita akan menggunakannya bersama-sama dalam beberapa contoh berikutnya.

Gunakan lokasi latar belakang dengan kata kunci

Gambar contoh kita memiliki banyak langit biru di pojok kiri atas, jadi mari kita posisikan dari kanan bawah:

div {
  background-size: cover;
  background-position: right bottom;
}

lihat pena
Ukuran latar belakang CSS, dua % nilai yang disediakan oleh beragampengetahuan (@beragampengetahuan)
di CodePen.

Selain berbagai kombinasi top, bottom, left Dan right,di samping itu center, yang memusatkan gambar dengan baik. (coba ganti background-position: right bottom; Dan background-position: center; dalam pena di atas. )

Gunakan posisi latar belakang dengan nilai panjang

Kami dapat memposisikan gambar latar belakang menggunakan nilai panjang seperti piksel dan ems. Ini memungkinkan kita untuk mendorong gambar menjauh dari tepi wadah atau menariknya menjauh dari tepi wadah. Misalnya:

div {
  background-size: cover;
  background-position: 20px 2em;
}

lihat pena
Kata kunci pemosisian latar belakang CSS dengan beragampengetahuan (@beragampengetahuan)
di CodePen.

Di sini, gambar diatur untuk menutupi wadah, tetapi kemudian didorong 20px dari kiri wadah dan 2em dari atas.

Nilai panjang dapat digabungkan dengan nilai kata kunci. Misalnya, bottom 20px right 2em Pindahkan gambar 20px dari bawah dan 2em dari kanan.

Kita juga bisa menggunakan nilai negatif untuk lebih jauh memindahkan gambar background ke posisi yang diinginkan.

Gunakan posisi latar belakang dengan nilai persentase

menggunakan background-position Nilai persentase memberi kita lebih banyak kendali atas pemosisian gambar, tetapi mungkin agak sulit untuk dipahami. Dalam demo ini, kami akan menghapus ukuran latar belakang dan hanya menggunakan ukuran alami gambar:

div {
  background-position: 50% 50%;
}

lihat pena
Posisi latar belakang CSS dengan nilai panjang yang disediakan oleh beragampengetahuan (@beragampengetahuan)
di CodePen.

jadi apa 50% artinya adalah? 50% apa?mewakili Tanda 50% gambar cocok dengan tanda 50% penampung. Artinya, jika kita menggambar garis vertikal dan horizontal melalui bagian tengah gambar dan bagian tengah wadah, garis tersebut akan cocok, seperti yang ditunjukkan pada gambar di bawah.

Jika kita mengatur background-position tiba 20% 40%artinya garis vertikal 20% dari kiri gambar cocok dengan garis vertikal 20% dari kiri kotak penampung, dan garis horizontal 40% dari atas gambar cocok dengan garis vertikal 40 % dari bagian atas kotak penampung, seperti yang ditunjukkan pada gambar di bawah ini.

Kesimpulannya

ini background-size properti adalah tambahan yang sangat berguna untuk CSS, dan sering berguna—terutama saat wadah mengubah ukuran dalam tata letak responsif.ini background-position Properti semakin meningkatkan fungsionalitas dengan memungkinkan kita memilih bagian mana dari gambar latar yang ditampilkan dalam wadah.

Meskipun apa yang telah kita bahas di sini mungkin berlaku untuk kasus penggunaan yang paling umum, masih banyak yang harus dipelajari tentang kedua properti ini.

Untuk mempelajari lebih lanjut, lihat halaman MDN untuk properti berikut:

Mereka mencakup beberapa opsi lain yang tidak kami bahas di sini, seperti cara menggunakan beberapa gambar latar belakang.

Akhirnya, ada baiknya membandingkan background-size Dan background-position Properti gambar latar belakang object-fit Dan object-position Atribut untuk Gambar Sebaris – Tambahan lain yang sangat berguna untuk toolbox CSS kami. Lihat cara menggunakan kesesuaian objek dan posisi objek CSS untuk ikhtisar singkatnya.