Contoh Penulisan KODE Background Image

Mengenal dan memahami cara penulisan dan penggunaan kode, baik kode CSS, javascript, xHTML ataupun kode yang lain seperti php menjadi satu kunci keberhasilan blogger agar mampu melakukan berbagai perubahan (modifikasi) hingga membuat template sendiri. Sekalipun belajar tentang kode HTML banyak menjadi sesuatu hal yang baru bagi banyak blogger, tetapi jika dilakukan dengan sungguh-sungguh dan telaten niscaya dalam waktu relatif singkat hal yang berkaitan dengan kode dan desain template dengan cepat akan segera dikuasai. Langkah termudah dan yang nantinya akan sangat menunjang kecepatan memahami kode HTML adalah dengan belajar tentang cara penulisan dan fungsi kode CSS. Banyak yang musti kita pelajari dan tentu saja cepat atau lambatnya pemahaman ini bergantung juga pada frekwensi latihan penulisan kode yang langsung diterapkan pada sebuah fungsi atau desain dalam blog atau dengan menggunakan bentuk software yang memang diperuntukkan untuk membuat desain melalui kode HTML seperti halnya dreamweaver. Penulisan kode background menjadi salah satu penulisan kode yang patut kita ketahui agar dapat menggunakan sebuah background yang berupa gambar secara benar. Untuk memunculkan sebuah background image dapat digunakan 2 buah kode yang berbeda.

• 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).

Related Post: