Mengganti dan Modifikasi Background Template Blog

Cara Mengganti dan Modifikasi Background Template Blog - Background merupakan salah satu faktor penting dalam suatu desain, terutama dalam pemilihan warna atau gambar sebagai background serta penempatan background yang tepat, karena dimana kita akan mendesain atau memodifkasi style-style yang lain, background merupakan acuan untuk memberikan desain style tersebut.

Sebagai asumsi ketika kita melakukan kesalahan dalam memberikan background yang cocok untuk sebuah template dan kita akan melakukan perubahan berupa penggantian warna ataupun gambar background, tentunya kita akan lebih bekerja keras untuk memperbaiki style-style lain untuk memberi kesesuaian terhadap background.

Untuk mengganti background template sangatlah mudah, kita hanya mengatur nilai properti background. Pada template blogger secara garis besar memiliki 5 elemen/bagian dasar dalam memberikan desain tampilan yang berbeda dalam hal background, bagian-bagian dasar tersebut meliputi bagian body, header, main, sidebar dan footer, dari kelima bagian tersebut kita bisa memberikan warna atau gambar sebagai background dengan gaya yang bebeda, sebagai ilustrasi perhatikan gambar dibawah ini.

Dari kelima bagian tersebut, terlepas dari bagian body, untuk blogger biasanya memiliki bagian untuk elemen widget yang bisa diditampilkan pada bagian sidebar, header, main dan footer. Elemen-elemen widget ini secara default akan mengikuti gaya elemen dimana kita menempatkan widget, sebagai contoh ketika sebuah widget diletakan pada bagian sidebar maka desain tampilannya, baik itu background ataupun style lainnya akan mengikuti gaya sidebar, terlepas dari itu sebuah widget blogger bisa berdiri sendiri(mempunyai style sendiri), karena secara otomatis akan diberikan ID (selektor) dari widget tersebut dan melalui id tersebut kita bisa memberikan background yang berbeda untuk tiap widget yang ada.

★★✩★★

Bagaimana kita mengganti kelima bagian tersebut dengan background warna atau gambar yang sesuai dengan yang kita inginkan?

Pemberian atau penggantian background terhadap bagian yang dimaksud, kita hanya menambahkan properti background untuk style css-nya sebagai contoh untuk bagian body, body merupakan bagian dasar dari sebuah template dan merupakan dasar dari semua background untuk bagian-bagian lainnya, untuk css-nya sebagai berikut:

body {
  background: #FFFFFF url(alamat gambar);
/*style lainnya disini*/
}

Pada css diatas menggambarkan 2 buah jenis background, yaitu background berupa warna (#FFFFFF) dan background berupa gambar, pemberian 2 jenis background baik itu warna ataupun gambar bertujuan untuk memberikan background alternatif dimana ketika background gambar tidak berhasil dimuat, maka background berupa warna yang akan tampil, selain itu dikala kita memberikan background gambar dengan ukuran lebih kecil daripada ruang sehingga tidak menutupi seluruh ruang, kekosongan background yang tidak tertutupi dengan gambar akan ditutupi oleh background warna.

Setelah kita memberikan background dasar pada bagian body, selanjutnya kita bisa memberikan background untuk bagian lainnya, baik itu header, main, sidebar dan footer dan caranya pun sama seperti kita memberikan background pada bagian body, sebagai contoh background untuk bagian main (post) sebagai berikut:

#main {
  background: #FFFFFF url(alamat gambar);
/*style lainnya disini*/
}

Begitu juga untuk bagian lainnya dalam mengganti background, sama caranya seperti diatas yang penting kita mengetahui nama selektor yang dipergunakan yang membangun bagian tersebut.

Dilihat pada gambar diatas, keempat bagian lainnya posisinya berada pada bagian body, tanpa memberikan properti background pada keempat bagian tersebut akan memberikan nilai background berupa transparan dan mengikuti warna atau gambar background bagian body.

Properti Background

Selain properti background, properti background bisa dikhususkan lagi untuk pemilahannya, seperti background-color ataupun background-image dan masih ada properti background lainnya untuk mengatur background-background tersebut:

Background Position

Properti background-position dipergunakan untuk memposisikan/meletakan background berupa gambar pada posisi sebelah mana background tersebut akan diletakan. contoh:

body {
  background-image:url(alamat gambar);
  background-position:left top;
/*style lainnya disini*/
}

Pada css diatas memberikan nilai posisi background gambar pada posisi pojok kiri atas, selain menggunakan keyword (left top) untuk lebih spesifik lagi posisinya kita bisa menggunakan x% y% (contoh:30% 70%) atau xpos ypos (contoh:40px 150px) nilai pertama menunjukan nilai pada posisi horizontal dan nilai kedua menunjukan nilai pada posisi vertical, selain nilai unit px, bisa menggunakan nilai unit lainnya seperti px, pt, em dll.

Background Repeat

Background repeat (pengulangan), nilai default dari background-repeat adalah repeat, background akan mengalami pengulangan gambar untuk memenuhi seluruh elemen, nilai lain dari background repeat: no-repeat (tidak mengalami pengulangan gambar), repeat-x (background mengalami pengulangan gambar hanya pada arah horizontal), repeat-y (background mengalami pengulangan gambar hanya pada arah vertical). contoh:

body {
  background-image:url(alamat gambar);
  background-position:left top;
  background-repeat:no-repeat;
/*style lainnya disini*/
}

Background Attachment

Secara default background-attachment mempunyai nilai scroll (mengikuti scroll jika kita melakukan scrolling page), selain nilai scroll, background-attachment memiliki nilai fixed, yaitu kebalikan dari nilai scroll (tidak mengikuti scroll jika melakukan scrolling page).

body {
  background-image:url(alamat gambar);
  background-position:left top;
  background-repeat:no-repeat;
  background-attachment:fixed;
/*style lainnya disini*/
}

Untuk menyingkat penulisan kode css dari keseluruhan properti background dan nilainya bisa menjadi seperti ini:

body {
  background: #FFFFFF url(alamat gambar) no-repeat fixed left top;
/*style lainnya disini*/
}

Untuk dasar modifikasi penggantian background template, properti tersebut diatas sudah mencukupi, walaupun dari kesemua peroperti yang ada diatas masih ada properti background lainnya seperti: background-clip, background-origin dan background-size.

Dari penjelasan diatas tidak menggunakan demo, saya berharap kalian bisa langsung mencobanya supaya lebih memahami properti background ini.