CSS : Background Fixed

Banyak yang menggunakan image background untuk mempercantik penampilan blognya.Lebih dari sekedar meramaikan penampilan, cara ini juga dinilai ampuh untuk menampilkan karakter blog sang pemilik.Tak heran bila beberapa blog milik kaum hawa diperkaya dengan tampilan bunga, boneka,coklat and all girls stuffs.Kesan segar, ceria dan menarik pun segera menyergap.

Bagi pengguna layanan Blogger kita diberikan kesempatan untuk menampilkan image sebagai background di dalam CSS Template.Pasti tak asing dengan tag CSS berikut :

body {
background:url('http://photos1.blogger.com/blogger/1234/567/890/berbunga.jpg') no-repeat;

Dengan adanya tag ini maka blogger akan menyertakan image berbunga.jpg di dalam blog dalam keadaan image utuh, tanpa ada pengulangan/tiling.Sangat cocok untuk dimensi gambar berukuran besar(dengan lebar 1000-an pixel).Keuntungan dari gambar dengan dimensi besar yakni pada saat image dimunculkan pengguna dengan resolusi monitor tinggi (1024*768) maupun rendah (800*600) akan dimunculkan secara aman.Meski memiliki keunggulan, image dengan dimensi besar berdampak pada lambatnya waktu yg dibutuhkan saat loading bagi pengakses blog.Terlebih image yang disimpan /hosted di luar Blogger.Tak ingin kan pengakses kita menunggu terlalu lama?

Lalu bagaimana bila image yang akan kita tampilkan berdimensi kecil, lebarnya kurang dari 1000-an pixel.Dengan tag diatas maka gambar akan dimunculkan secara apa adanya, artinya menyisakan banyak space kosong di samping dan bawahnya.Seperti berikut :



Untuk itu CSS dilengkapi dengan atribut fixed dan repeat untuk body background.

Yakni;

body {
background:url('http://photos1.blogger.com/blogger/1234/567/890/berbunga.jpg') repeat fixed;

artinya gambar tersebut akan menduplikasi diri seukuran monitor yang bersangkutan.Posisi gambarpun akan tetap dalam kuadran x dan y, yang berdampak bila content didalamnya penuh hingga memerlukan scroller untuk membukanya, maka saat scroll kita drag posisi gambar tidak akan terpengaruh.Dia akan diam dengan manisnya.Berikut ilustrasinya :


Lalu ada pula ;

body {
background:url('http://photos1.blogger.com/blogger/1234/567/890/berbunga.jpg') repeat-y fixed;

Image akan diduplikasikan searah kuadran y/vertikal.Dan bila discroll posisi image tetap diam.





Lalu bisa pula ;

body {
background:url('http://photos1.blogger.com/blogger/1234/567/890/berbunga.jpg') repeat-x fixed;

Image akan diduplikan searah kuadran x/horizontal.Bila discroll posisi image diam.




Semua akan dikembalikan kepada keinginan sang pemilik blog untuk menampilkanya.Sedikit sentuhan yang bisa mengundang kekaguman kan?

Tag : wallpaper layout klo di scroll ga ikut gerak, background diam, background fixed.