Jenis nilai <image> menunjukkan gambar 2D. Ini bisa berupa referensi URL, notasi gambar, atau notasi gradien.

Sintaks untuk <image> adalah:

 

Di Level 1 dan 2 CSS, nilai gambar hanya bisa diberikan oleh nilai <url> tunggal. Di CSS3, nilai-nilai baru diperkenalkan yang memungkinkan untuk mendefinisikan gambar. Nilai <gradient> memungkinkan mendefinisikan gambar sebagai gradien dan pola warna. Notasi fungsional gambar () memungkinkan penulis CSS untuk menentukan gambar mundur jika gambar yang disukai tidak dapat diterjemahkan atau merupakan jenis yang tidak dikenali browser, dan memungkinkan menggunakan warna solid sebagai nilai gambar. Setiap <string> atau <url> gambar di dalam () mewakili gambar, sama seperti jika notasi url () telah digunakan.

Di peramban berbasis Gecko, jenis gambar lain didukung: yang didefinisikan menggunakan notasi elemen (). Fungsi elemen () CSS mendefinisikan gambar yang dihasilkan dari elemen HTML sewenang-wenang. Gambar ini langsung, artinya jika elemen HTML diubah, properti CSS menggunakan nilai yang dihasilkan diperbarui secara otomatis.
Nilai gambar elemen () masih eksperimental, dan hanya berfungsi di Firefox saat ini.

<image> dapat digunakan di banyak properti CSS, termasuk gambar latar belakang, gambar gaya daftar, kursor.

Trivia dan Catatan

Dalam beberapa kasus, gambar tidak valid — misalnya, ketika <url> menunjuk ke sumber daya yang bukan format gambar yang valid. Gambar yang tidak valid ditampilkan sebagai gambar transparan berwarna solid tanpa dimensi intrinsik. Namun, gambar yang tidak valid memiliki perilaku khusus dalam beberapa konteks, seperti notasi gambar ().

CSS dapat menangani berbagai jenis dan format gambar, beberapa di antaranya memiliki dimensi (inheren) intrinsik (seperti gambar JPEG), yang lain mungkin memiliki rasio aspek tinggi-ke-lebar tetapi tidak ada dimensi (seperti gambar SVG), dan beberapa tidak memiliki dimensi intrinsik atau rasio aspek (seperti gradien CSS). Cara ukuran “nyata” ditentukan dalam CSS tergantung pada ukuran latar belakang elemen, tinggi dan lebar elemen, dan / atau properti yang digunakan gambar:

  • background-image: Ketika gambar digunakan sebagai gambar latar, ukuran standarnya adalah area pemosisian latar belakang elemen, dan ukuran akhirnya ditentukan berdasarkan ukuran default bersama dengan informasi ukuran yang tersedia lainnya yang disediakan oleh tipe gambar (intrinsik dimensi, rasio, dll.).

 

  • list-style-image: Ketika sebuah gambar digunakan sebagai penanda daftar, ukuran standarnya diatur ke ukuran karakter 1em, dan ukuran akhirnya ditentukan berdasarkan ukuran default bersama dengan informasi ukuran lain yang tersedia yang disediakan oleh tipe gambar (dimensi intrinsik, rasio, dll.).

 

  • border-image: Ketika gambar digunakan sebagai gambar tepi, ukuran standarnya adalah ukuran area gambar batas elemen, dan ukuran akhirnya ditentukan berdasarkan ukuran default bersama dengan informasi ukuran yang tersedia lainnya yang disediakan oleh jenis gambar ( dimensi, rasio, dll. intrinsik.

 

  • kursor: Ketika gambar digunakan sebagai gambar kursor, ukuran standarnya adalah ukuran yang ditentukan browser yang cocok dengan ukuran kursor pada sistem yang digunakan, dan ukuran akhirnya ditentukan berdasarkan pada ukuran default bersama dengan informasi ukuran yang tersedia lainnya disediakan oleh tipe gambar (dimensi intrinsik, rasio, dll.).

 

  • Gambar juga dapat digunakan dengan konten yang diganti, seperti dengan kombinasi properti konten CSS dalam kombinasi dengan CSS pseudo-elements :: after dan :: before. Dalam hal ini, ukuran gambar default adalah 300px x 150px, dan ukuran akhirnya ditentukan berdasarkan ukuran default bersama dengan informasi ukuran yang tersedia lainnya yang disediakan oleh jenis gambar (dimensi intrinsik, rasio, dll.).

Contoh berikut menunjukkan bagaimana suatu gambar dapat didefinisikan menggunakan notasi url ().

 

Browser Support

Notasi gambar () masih eksperimental dan belum didukung oleh browser apa pun. Notasi element () juga masih eksperimental dan saat ini hanya didukung oleh Firefox. Silakan merujuk entri <url> dan <gradient> untuk detail tentang dukungan browser untuk dua nilai.

WhatsApp chat