Multiple Background Images

Menggabungkan beberapa image menjadi satu image tidak lagi harus dilakukan dengan menggunakan software image editing. Anda bisa memanfaatkan property css3 multiple background images. Dengan properti ini beberapa gambar image bisa digabungkan menjadi satu hingga menghasilkan sebuah image baru. Anda bahkan bisa juga menggabungkan image animasi gif ke dalamnya sehingga image baru yang nantinya dihasilkan tentu saja terlihat sebagai image animasi gif. Agar image bisa ditampilkan secara sempurna menurut keinginan, beberapa background-properti lain bisa ditambahkan kedalamnya sehingga posisi background, pengulangan background dan ukurannya bisa diatur.

Kode dasar multiple background images

background-image:url(image-1.jpg), url(image-2.gif), url(image-3.png), url(image-4.jpg);

Menggabungkan beberapa Background Property

Background Property menjadi sangat penting untuk dibahas secara khusus karena melalui background property ini beberapa properti background dapat dituliskan menjadi sebuah kode terpadu yang membuat penulisan kode css menjadi lebih efisien, praktis dan efektif. Anda dapat menggabungkan penulisan background-color property, background-image property, background-position property dan background-repeat property hanya dalam sebuah kode sehingga bentuknya menjadi lebih pendek.

Contoh beberapa kode background-property

background-color:red;
background-image:url(image.jpg);
background-repeat:no-repeat;
background-position:top center;
background-attachment:fixed;

Background Origin Property

Background origin property memungkinkan pengaturan background sebuah elemen/box agar bisa dimulai pada tiga ujung bagian berbeda. Border, padding dan content box. Agar background dapat berfungsi secara optimal, background size property harus dilibatkan di dalamnya. Penggunaan nilai/value % (persen) jadi pilihan paling tepat untuk memudahkan pengaturan. Jika ingin menambahkan property background lainnya, maka background position dapat digunakan selain tentu saja background-repeat property dan background-image property.

Kode Background origin property

• background-origin:border-box
• background-origin:padding-box
• background-origin:content-box

Background Clip Property

Background clip property merupakan salah satu property css3 yang sudah mendapat dukungan penuh secara sempurna dari browser besar seperti Opera, Mozilla Firefox, Safari, Google Chrome. Semua browser juga sudah menggunakan kode yang sama sehingga membuat pengguna lebih edisien saat menggunakan kode css. Background clip property berfungsi untuk mengatur posisi background yang didasarkan atas border, padding dan content. Pengaturan penentuan posisi dilakukan dengan 3 value berbeda.

Penulisan kode background clip property

• background-clip:border-box;
• background-clip:padding-box;
• background-clip:content-box;

Background Size Property

Kemajuan besar telah banyak dicapai pada kode css. Background size property adalah salah satu diantaranya. Sebuah property yang membuat designer blog atau blogger lebih mudah dalam mengaplikasikan image sebagai sebuah background image karena dengan properti baru ini ukuran image menjadi lebih fleksibel. Anda dapat merubah ukuran sebuah background image sesuka hati hanya dengan menambahkan value/nilai yang sesuai dengan ukuran yang diharapkan pada background-size property. Jika sebelumnya kita dipusingkan untuk menggunakan software pembuat gambar/image editing dengan sebaik mungkin agar mendapatkan ukuran background setepat mungkin, kini hal ini bisa sedikit diabaikan karena kesalahan ukuran background image yang tak terlalu fatal dapat kita koreksi melalui background size property.

Background Attachment Property

Background attachment property secara spesifik digunakan untuk pemasangan background image pada body. Background image yang digunakan bisa dibuat dalam bentuk berulang/repeat atau tunggal/tak berulang/no-repeat. Pada umumnya background attachment lebih banyak menggunakan background tunggal dengan ukuran besar yang memenuhi halaman blog/web. Background attachment mempunya tiga macam value/nilai.

Value/nilai background attachment

Ada dua nilai/value yang digunakan pada background attachment property.

• background-attachment:fixed;
• background-attachment:scroll;

Background Position Property

Background position property merupakan salah satu dari css background yang sangat penting saat background image property digunakan. Berfungsi untuk mengatur posisi background dalam arah vertical dan horizontal. Background position property biasa dipekerjakan bersama dengan background image property, background repeat property dan background size property, sekalipun yang paling sering adalah bersama background image property.

Value/nilai background position property

Ada 3 value yang sering digunakan untuk pengaturan posisi background.

Background Repeat Property

Properti background repeat berfungsi untuk menciptakan efek pengulangan pada penggunaan image sebagai background (background image property). Dengan fungsi tersebut background repeat property dimanfaatkan untuk melengkapi fungsi yang berlaku pada background image property. Sebuah background image dapat diatur untuk ditampilkan sebagai background tunggal atau background berulang.

Pengulangan background image

Ditinjau dari cara penulisan kode, fungsi dan kegunaannya, background repeat property dapat dibedakan menjadi:

Background Image Property

Background image merupakan salah satu background property yang cukup disukai karena mampu menghadirkan "sesuatu yang tak mampu diciptakan melalui background color property". Tak dapat dipungkiri karena memang hampir semua fungsi backgroud color dapat digantikan oleh background image, sedangkan background color tak mampu menggantikan hampir sebagian besar peran yang mampu diberikan oleh sebuah background image. Sebagai contoh adalah background image mampu menghadirkan sebuah background berupa gambar pemandangan pegunungan dengan detail lengkap disertai berbagai pohon dan gunung serta burung yang terlihat sedang terbang tak mungkin dibuat atau digantikan melalui background color property.

Background Color Property

Background color property merupakan efek background yang paling sering digunakan dan hingga saat ini dikembangkan dengan sangat intensif melalui css3. Berkat pengembangan tersebut penggunaannya menjadi semakin variatif dan dalam beberapa hal bahkan mampu menggantikan fungsi efek background yang sebelumnya harus menggunakan background image seperti yang terjadi pada background gradient. CSS3 background gradient pada saat ini banyak digunakan untuk menggantikan fungsi efek dari background gradient dari sebuah image. Kelebihan utama background color dibandingkan background image adalah pada beban yang jauh lebih ringan sehingga beban loading blog tak terlalu bertambah berat. Bahkan, banyak image kini bisa dibuat hanya dengan memanfaatkan kode css dan css3 yang melibatkan property backgrouns color, background gradient dan border-radius property.
Dalam penggunaanya ada beberapa jenis background color yang dapat dipergunakan dan hampir semuanya telah mendapat dukungan penuh dari browser ternama seperti Mozilla, Google Chrome, Safari, Opera dan IE.

CSS Background

CSS background berfungsi untuk membuat efek background pada sebuah elemen, dimana background dapat berupa background color (warna) ataupun background image (gambar). Property background color dan background image ini masih dapat diatur dengan beberapa background property lainnya sehingga sehingga background dapat dibentuk atau diatur sesuai keinginan.

CSS Background Property

Klik link di bawah ini untuk mengetahui bagaimana setiap background property bekerja. Setiap link memuat tutorial secara lengkap berikut demo.

1. background-color-property
2. background-image-property
3. background-repeat-property
4. background-position-property
5. background-attachment-property
6. background-size-property
7. background-clip-property
8. background-origin-property