- background-image
- background
Kedua kode di atas kemudian diikuti sebuah URL yang merupakan alamat dari gambar/image yang tersimpan di file/image hosting yang akan dimunculkan sebagai background image.
Untuk lebih jelasnya sampeyan bisa melihat contoh metode penulisan kode background yang bertujuan untuk menampilakan image sebagai background.
- background-image: url(http://...../images/bg.jpg);
- background: url(http://...../images/bg.jpg);
- background: color url(http://...../images/bg.jpg);
Contoh-contoh penulisan KODE:
- background-image:gray url(https://lh5.googleusercontent.com/-yYzByHWJtrI/T24kWrW8TXI/AAAAAAAAAhM/JoVhKrFHCHk/h120/logoGR-CircleGRV66H66.jpg) top right no-repeat;
- background: url(https://lh6.googleusercontent.com/-bVNeoiocOiE/T24fY4ic83I/AAAAAAAAAgc/7_uZ-DFjdqI/h768/gubhugreyot_penelopecruz.jpg) top center no-repeat;
- background: #f00 url(https://lh6.googleusercontent.com/-I4jXT-3UIzE/T2OFEwW7CFI/AAAAAAAAAas/Ao2K4KgKrNQ/s500/pink-Vgrad-3x500.png) top left repeat-x;
- background:url(https://lh6.googleusercontent.com/-WtyZZs2AcDs/T24gaEST_hI/AAAAAAAAAg0/Dk9DG4WSqyU/h120/gubhugreyot_emboss-01.gif);
Catatan/Keterangan:
- Dari ke-4 contoh di atas semua kode yang dituliskan akan memunculkan sebuah background yang berupa image, hanya pada contoh ke-3 dan ke-4 juga dilibatkan background warna yang memanfaatkan kode warna dalam bentuk angka dan huruf (contoh ke-3) dan kode warna dalam bentuk teks yang menyatakan warna (contoh ke-1).
- Dengan digunakannya warna maka selain akan terlihat background dalam bentuk gambar maka sekaligus di dalamnya akan ditampilan background yang lain dalam rupa warna secara bersamaan.
- Dalam perkembangannya, sebuah penulisan kode background juga masih memungkinkan dikembangkan melalui penambahan beberapa kode lain untuk membuat berbagai pengaturan yang memungkinkan sebuah backgrund image tertata dengan baik, rapi dan tepat terpasang pada posisi dan keadaan tertentu sesuai dengan desain yang direncanakan.
- Beberapa contoh kode pada background juga ditambahkan kode background-repeat » repeat-x, repeat-y, no-repeat serta background-position.
- background-repeat adalah suatu perintah pengulangan background image secara vertical (repeat-y), horizontal (repeat-x), vertical-horizontal (repeat), tak berulang (no-repeat).
- background-position berfungsi untuk menentukan posisi image sebagai background terhadap bidang/box/kolom/ruang yang akan akan diberi background. value background position dinyatakan dalam top, left, right, bottom, center serta % (persen) dan pixel (px).