The background-imageproperti di CSS berlaku grafis (misalnya PNG, SVG, JPG.webp, GIF, WebP) atau gradien untuk latar belakang suatu elemen.
Ada dua jenis gambar yang dapat Anda sertakan dengan CSS: gambar biasa dan gradien.
Gambar-gambar
Menggunakan gambar di latar belakang cukup sederhana:
body ( background: url(sweettexture.jpg.webp); )The url()nilai memungkinkan Anda untuk memberikan path file untuk gambar apapun, dan itu akan ditampilkan sebagai latar belakang untuk elemen itu.
Anda juga dapat menyetel URI data untuk url(). Itu terlihat seperti ini:
body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )Teknik ini menghapus satu permintaan HTTP, yang merupakan hal yang baik. Namun, ada sejumlah kelemahan, jadi sebelum Anda mulai mengganti semua gambar, pastikan Anda mempertimbangkan semua pro dan kontra URI Data.
Anda juga dapat menggunakan background-imagegambar sprite, yang merupakan metode berguna lainnya untuk mengurangi permintaan HTTP.
Gradien
Opsi lain saat menggunakan latar belakang adalah memberi tahu browser untuk membuat gradien. Berikut adalah contoh sederhana super-duper dari gradien linier:
body ( background: linear-gradient(black, white); )Anda juga dapat menggunakan gradien radial:
body ( background: radial-gradient(circle, black, white); )Secara teknis, gradien hanyalah bentuk lain dari gambar latar belakang. Perbedaannya adalah browser membuat gambar untuk Anda. Berikut cara menulisnya: Sintaks Gradien CSS3
Contoh di atas hanya menggunakan satu gradien, tetapi Anda juga dapat melapisi beberapa gradien di atas satu sama lain. Ada beberapa pola menakjubkan yang bisa Anda buat dengan menggunakan teknik ini.
Menyetel Warna Cadangan
Jika gambar latar gagal dimuat, atau latar belakang gradien Anda dilihat di browser yang tidak mendukung gradien, browser akan mencari warna latar belakang sebagai pengganti. Anda dapat menentukan warna fallback Anda seperti ini:
body ( background: url(sweettexture.jpg.webp) blue; )Beberapa Gambar Latar Belakang
Anda dapat menggunakan banyak gambar, atau campuran gambar dan gradien, untuk latar belakang Anda. Beberapa gambar latar belakang didukung dengan baik sekarang (semua browser modern dan IE9 + untuk gambar grafik, IE10 + untuk gradien).
Saat Anda menggunakan beberapa gambar latar belakang, ketahuilah bahwa ada urutan penumpukan yang agak berlawanan dengan intuisi. Buat daftar gambar yang harus di depan dulu, dan gambar yang harus di belakang terakhir, seperti ini:
body ( background: url(logo.png.webp), url(background-pattern.png.webp); )Saat Anda menggunakan beberapa gambar latar belakang, Anda akan sering kali perlu menetapkan lebih banyak nilai untuk latar belakang agar semuanya berada di tempat yang tepat. Jika Anda ingin menggunakan backgroundsingkatan, Anda dapat mengatur nilai untuk setiap gambar satu per satu. Singkatan Anda akan terlihat seperti ini (perhatikan koma yang memisahkan gambar pertama dan nilainya dari gambar kedua dan nilainya):
body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )Tidak ada batasan berapa banyak gambar latar yang dapat Anda atur, dan Anda dapat melakukan hal-hal keren seperti menganimasikan gambar latar belakang Anda. Ada contoh bagus dari beberapa gambar latar belakang dengan animasi di blog David Walsh.
Demo
Lihat gambar latar belakang Pena oleh CSS-Tricks (@ css-trick) di CodePen.
Terkait
- background-attachment
- klip latar belakang
- warna latar belakang
- background-origin
- background-position
- ulangi latar belakang
- background-size
Sumber Daya Lainnya
- Spesifikasi CSS3
- MDN
- Gambar Latar Belakang Halaman Penuh Sempurna
- Menguasai Gradien CSS (Slidedeck)
Dukungan Browser
Gambar biasa berfungsi di mana saja, dan banyak gambar berfungsi di browser modern dan IE9 +. Berikut dukungan untuk gradien:
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5.1+ | 3.6+ | 12.1+ | 10+ | 4+ | 5.1+ |