Mengganti Image Pada Background

Mengganti Atau Menambahkan Image Pada Background : Jika pada kesempatan yang lalu, telah dijelaskan cara mengganti warna pada background maka kali ini, Tips dan Trik Blog akan menjelaskan cara mengganti image pada background. Pada prinsipnya, tips ini tidak berbeda jauh dengan tips sebelumnya, hanya mengganti kode warna dengan image (alamat URL image). Jika tertarik, silakan ikuti tipsnya berikut ini.

Sebelum melanjutkan, sebaiknya kita baca postingan tentang cara mengganti warna background terlebih dahulu karena tips kali ini masih berhubungan dengan tips tersebut. Jika sudah, mari kita lanjutkan kepada tips mengganti image pada backround berikut ini.

Yang perlu saya tekankan lagi adalah jangan lupa untuk melakukan pem-backup-an terlebih dahulu untuk mengatisipasi hal-hal yang tidak kita inginkan.

Langkah-langkah mengganti image pada background adalah sebagai berikut.

Pertama, seperti biasanya, lakukan login ke http://blogger.com hingga masuk Dasbor >> Edit HTML
Kedua, cari kode css body, dengan format seperti di bawah ini.

body {
……………..
……………..
}

Untuk mengganti atau menambahkan image pada background, kita harus menambahkan atau mengganti kode dengan format berikut pada tag body tersebut.

background-image: url(alamat_URL_image)

Catatan :

alamat_URL_image adalah alamat image yang sudah kita upload pada photo hosting. Sebagai contoh seperti di bawah ini.

body {
background-image:url(http://www.geocities.com/yono_pati/blue.jpg);
…………..
………….
}

Jika menginginkan, kita dapat mengganti atau menambahkan image background pada sidebar yang berbeda dan formatnya seperti di bawah ini.

#sidebar-wrapper {
background-image:url(alamat_URL_image);
........
........
}

Jika menginginkan image background pada bodi postingan yang berbeda, kita dapat menuliskannya dengan format seperti di bawah ini.

#main-wrapper {
background-image:url(alamat_URL_image);
…………
…………
}

Ketiga, simpan template
Keempat, selesai

Sebagai contoh, kita akan mengganti image background pada template Minima, milik Blogspot. Pada template tersebut, kita dapat menemukan kode css body-nya adalah seperti di bawah ini.

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Untuk menambahkan image background (misalkan dengan alamat_URL “http://www.geocities.com/yono_pati/blue.jpg”) adalah menjadi seperti di bawah ini.

body {
background:$bgcolor;
background-image:url(http://www.geocities.com/yono_pati/blue.jpg);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Untuk menambahkan image pada background sidebar, cari kode css sidebar, seperti di bawah ini.

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Misalkan, kita ingin menambahkan image (dgn alamat_URL "http://www.freebackgrounds.com/back-283.gif") tambahkan kode yang berwarna merah, sehingga menjadi seperti di bawah ini.

#sidebar-wrapper {
background-image:url(http://www.freebackgrounds.com/back-283.gif);
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Untuk mengganti/menambah image background pada bodi postingan, cari kode css main-wrapper, seperti di bawah ini.

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Misalkan kita ingin menambahkan image background (dgn alamat_URL "http://www.geocities.com/yono_pati/batahijau.gif) maka tambahkan kode yang berwarna merah sehingga menjadi seperti di bawah ini.

#main-wrapper {
backgroung-image:url(http://www.geocities.com/yono_pati/batahijau.gif);
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Begitu juga jika kita ingin menambahkan image pada header dan footer maka kita harus menambahkan kode "background-image:url(alamat_URL_image)" pada kedua kode css tersebut.

Hasilnya, seperti screenshot di bawah ini.



PERINTAH PERULANGAN IMAGE (REPEAT BACKGROUND IMAGE)

Secara default, image akan ditampilkan secara berulang-ulang untuk memenuhi seluruh halaman blog. Misalkan kita mempunyai image berupa gambar buku kecil maka seluruh halaman akan diisi penuh dengan gambar-gambar buku kecil tersebut hingga memenuhi seluruh halaman blog. Jika menginginkan, kita dapat melakukan kustomasi terhadap perulangan image tersebut dengan pilihan perintah sebagai berikut.

background-repeat:no-repeat;

Dengan perintah tersebut maka tidak ada pengulangan image yang ada.

background-repeat:repeat-x;

Dengan perintah tersebut, image akan ditampilkan berulang-ulang secara horizontal.

background-repeat:repeat-y;

Dengan perintah tersebut, image akan ditampilkan berulang-ulang secara vertical.


MENENTUKAN POSISI IMAGE BACKGROUND (POSITION BACKGROUND IMAGE)

Jika menginginkan, kita dapat menentukan posisi image pada posisi tertentu di dalam suatu halaman blog. Kombinasi posisi dapat dipilih adalah di antara berikut ini.

top left;
top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;

Contoh formatnya adalah seperti di bawah ini.

background-position:center center;

Dengan perintah tersebut, image akan berada pada posisi tengah baik secara horizontal maupun vertikal.

Selain itu, kita juga dapat menentukan posisi dengan prosentase atau dalam pixel tertentu, seperti di bawah ini di mana x adalah mewakili nilai horizontal sedangkan y mewakili nilai vertical.

x% y%
xpx ypx

Sebagai contoh, jika kita menginginkan image berada pada posisi 20% secara horizontal dan 10% vertical maka formatnya adalah sebagai berikut.

background-position:20% 10%;

MEMBUAT IMAGE BACKGROUND STATIS

Secara default, image background akan bergerak mengikuti pergerakan scroll baik ke atas maupun ke bawah. Jika menginginkan, kita dapat membuat image tersebut menjadi statis atau tidak bergerak ketika kita melakukan scroll terhadap halaman blog. Perintahnya adalah sebagai berikut.

background-attachment:fixed;

APLIKASI SEMUA PERINTAH

Jika kita memasukkan semua unsur perintah seperti yang telah kita bahas di atas maka kita akan mendapati kode khusus untuk image pada tag body adalah sebagai berikut.

body {
background-image:url(http://www.geocities.com/yono_pati/blue.jpg);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
}

Jika menginginkan, kita dapat meringkas perintah-perintah tersebut menjadi seperti di bawah ini tentunya dengan hasil yang sama.

body {
background: url(http://www.geocities.com/yono_pati/blue.jpg) no-repeat center center fixed;
}

Dengan deklarasi seperti itu, image blue.jpg akan ditampilkan satu kali (tidak berulang), dengan posisi ditengah-tengah baik secara horisontal maupun vertikal dengan status statis (walaupun discroll, image tidak akan bergerak).

Selamat Mencoba namun jangan lupa untuk melakukan backup terlebih dahulu!!

Posted in: Background blog