CSS untuk dua Background Image pada satu halaman

CSS untuk menampilkan dua image-background sekaligus pada sebuah halaman ini cukup sederhana dan tidak ribet.

Pada kesempatan ini saya hanya akan memberikan dasar-dasar trick-nya saja. Tidak membahas secara keseluruhan sebuah Theme.
Saya berharap, Anda akan dapat mengembangkan sendiri CSS tersebut hingga membentuk sebuah Style Sheet yang lengkap, yang dapat mengatur bagaimana page Anda tampil, sesuai keinginan Anda.

Artikel ini saya terbitkan guna menjawab beberapa pertanyaan yang sering saya terima, baik di page DK maupun di group ini yaitu, bagaimana agar background tidak tampil terpisah / terpotong-potong (saat diberi value repeat, repeat-x). Pada kesempatan tersebut, ada masukan / ide dari Juriglagu tentang memberikan background sebanyak dua buah. Secara kebetulan, beliau pasang dua buah tapi tampil secara bergantian dengan perintah hover ( hover pseudo-class ).
Berikut adalah block CSS-nya.

/* --- Background Left-side --- */
body {
background:#FFFFFF url(http://i271.photobucket.com/albums/jj141/dangdutkoplo/scratch/JL-bg-left.jpg) no-repeat Bottom Left fixed;
}

/* --- Background Right side --- */
div.bodywrap {
background:transparent url(href="http://i271.photobucket.com/albums/jj141/dangdutkoplo/scratch/JL-bg-right.jpg) no-repeat Bottom Right fixed;
}

/* --- Content Wrapper HARUS transparent --- */
div.contentwrapper {
background-color:transparent;
}Penjelasan :

Seting background untuk sebelah kiri, ditangani oleh tag selector body.
Seting background untuk sebelah kanan, ditangani oleh selector pada class bodywrap.
Agar semua background tampil, seting background color pada contentwraper harus di-set ke transparent. Jika tidak di-set ke transparent, tampilan anda akan ditutupi oleh warna background dari contentwrapper.

Pemakaian background ganda ini saya susun dari Whiteout base theme.
Pilih theme Whiteout, isikan group deklarai selector di atas ke dalam Custom CSS.
Jalankan, dan perhatikan efeknya. Tidak mengecewakan.

Terimakasih kepada Juriglagu atas idenya dan sekaligus dengan 2 buah image yang menjadi background dari CSS ini.





Semoga bermanfaat.
Enjoy.