Gambar Latar Belakang CSS - Cara Menambahkan URL Gambar ke Div

Katakanlah Anda ingin meletakkan satu atau dua gambar di halaman web. Salah satu caranya adalah dengan menggunakan background-imageproperti CSS.

Properti ini menerapkan satu atau beberapa gambar latar belakang ke sebuah elemen, seperti a , seperti yang dijelaskan dokumentasi. Gunakan untuk alasan estetika, seperti menambahkan latar belakang bertekstur ke halaman web Anda.

Tambahkan Gambar

Sangat mudah untuk menambahkan gambar menggunakan background-imageproperti. Cukup berikan jalur ke gambar dalam url()nilainya.

Jalur gambar dapat berupa URL, seperti yang ditunjukkan pada contoh di bawah ini:

div { /* Background pattern from Toptal Subtle Patterns */ background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"); height: 400px; width: 100%; } 

Atau bisa juga jalur lokal. Berikut contohnya:

body { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("./images/oriental-tiles.png"); } 

Tambahkan Beberapa Gambar

Anda dapat menerapkan beberapa gambar ke background-imageproperti.

div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; background-position: right, left; } 

Itu kode yang banyak. Mari kita hancurkan.

Pisahkan setiap url()nilai gambar dengan koma.

background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); 

Sekarang posisikan dan tingkatkan gambar Anda dengan menerapkan properti tambahan.

background-repeat: no-repeat, no-repeat; background-position: right, left; 

Ada beberapa sub-properti yang dapat Anda tambahkan ke gambar latar belakang Anda, seperti background-repeatdan background-position, yang kami gunakan dalam contoh di atas. Anda bahkan dapat menambahkan gradien ke gambar latar belakang.

Lihat seperti apa saat kita menggabungkan semuanya.

Urutan Penting

Urutan daftar gambar Anda dalam masalah karena urutan susun. Itu berarti gambar pertama yang terdaftar paling dekat dengan pengguna, menurut dokumentasi. Lalu, berikutnya, dan berikutnya, dan seterusnya.

Berikut contohnya.

div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; } 

Kami telah mencantumkan dua gambar dalam kode di atas. Gambar pertama (morocco-blue.png) akan berada di depan gambar kedua (oriental-tiles.png). Kedua gambar berukuran sama dan kurang opacity, jadi kita hanya melihat gambar pertama.

Tetapi jika kita memindahkan gambar kedua (oriental-tiles.png) ke kanan sebesar 200 piksel, maka Anda dapat melihat sebagian darinya (sisanya tetap tersembunyi).

Inilah yang terlihat ketika kita menggabungkan semuanya.

Kapan Anda Harus Menggunakan Gambar Latar Belakang?

Ada banyak hal yang disukai tentang background-imageproperti ini. Tapi ada kekurangannya.

Gambar tersebut mungkin tidak dapat diakses oleh semua pengguna, dokumentasinya menunjukkan, seperti mereka yang menggunakan pembaca layar.

Itu karena Anda tidak dapat menambahkan informasi tekstual ke background-imageproperti. Akibatnya, gambar akan terlewatkan oleh pembaca layar.

Gunakan background-imageproperti hanya ketika Anda perlu menambahkan beberapa dekorasi ke halaman Anda. Jika tidak, gunakan elemen HTML jika gambar memiliki arti atau tujuan, seperti catatan dokumentasi.

Dengan begitu, Anda dapat menambahkan teks ke elemen gambar, menggunakan altatribut yang mendeskripsikan gambar. Teks yang disediakan akan diambil oleh pembaca layar.

Anggap saja seperti ini: background-imageadalah properti CSS, dan CSS berfokus pada presentasi atau gaya; HTML berfokus pada semantik atau makna.

Jika menyangkut gambar, Anda punya opsi. Jika gambar diperlukan untuk dekorasi, maka background-imageproperti tersebut mungkin pilihan yang tepat untuk Anda.

Saya menulis tentang belajar program dan cara terbaik untuk melakukannya ( amymhaddad.com).