2 CARA MENGGANTI BACKGROUND GAMBAR MENJADI PENUH

Cara mengganti background gambar jadi penuh

Apakah Bosan dengan tampilan blog anda ? solusinya rubah sedikit tampilan backgroundnya,  cukup banyak tuorial blog yang posting cara untuk ganti background, akan tetapi hanya khusus sebatas mengganti background saja, hasilnya hampir rata-rata gambar yang diganti berubah jadi banyak, karna akan otomatis di repeat hingga memenuhi layar monitor, akan tetapi untuk format gifs tidak ada masalah, setelah saya utak atik kesana kemari  ternyata kesalahan terjadi pada kurang lebarnya ukuran resolusi gambar,  hampir semua semua jenis template membutuhkan resolusi yang lebar,  akan tetapi ukuran filenya harus sekecil mungkin agar ringan di blog. Adapun cara untuk mengatasinya adalah :

CARA PERTAMA   :   Gunakan gambar dengan resolusi yang sesuai, minimal dengan resolusi  700 x 1100

CARA KEDUA      :   Adalah dengan cara merubah sedikt  kode CSS nya, cara inilah yang akan gunakan karena caranya sangat gampang, cara ini saya dapatkan dari blognya Mas Ghubuk Reot oke kita mulai. kode kedua ini tetapi setelah semua tidak sempurna setelah saya putar sana putar sini  seperti yang selama ini saya dengan image background Untuk mengubah background dengan gambar, pertama kali yang anda persiapkan terlebih dahulu adalah gambar. gambar tersebut baik berupa foto, gambar animasi atau apa saja. setelah itu anda harus mengupload nya disitus lain untuk menyimpan gambar. Untuk ukuran gambar anda tidak perlu membuatnya dalam ukuran besar. karna akan otomatis di repeat hingga memenuhi layar monitor.

Berikut langkah-langkah mengganti background dengan gambar

1.Siapkan gambar atau animasi yang akan digunakan, dengan mengupload ke situs penyimpan gambar banyak disini atau yang disini

2. Log in dulu ke blogger

3. Klik Tata Letak

4.  klik  Edit HTML

Cari kode seperti di bawah ini,kode ini belum mempunyai background gambar

body {
background-color: #aba;
margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color:#000;
font-size/* */:/**/small;
font-size: /**/small;
}

Tambahkan tempat untuk meletakakan url gambar anda

body {
background: url("http://alamat url gambar anda");
margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color:#000;
font-size/* */:/**/small;
font-size: /**/small;
}

Pratinjau dulu kalau hasilnya bagus langsung di save aja,  tetapi kalau gambar background berubah jadi banyak, kita gunakan cara pamungkas yaitu dengan merubah kode CSS agar ukuran gambar tersebut dapat disesuaikan secara otomatis.

Hapus semua kode diatas ganti dengan kode dibawan ini

body{

     background:#fff url(.../images/bg_body.jpg);

     background-position:left top;

     background-repeat:no-repeat;

     background-attachment:fixed;

     background-size:cover; /* atau background-size:1024px auto; */

     margin:0; /* in IE */

     padding:0; /* in IE */

     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale'); /*IE 8 */

     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale')";  /*IE 8 */

}

Atau bisa juga diganti dengan dibawah ini,  pilih salah satunya.

body{

     background:#fff url(http://www5.jpg) center center no-repeat fixed;

     background-size:cover; /* atau background-size:1024px auto; */

     margin:0; /* in IE */

     padding:0; /* in IE */

     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale'); /*IE 8 */

     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale')";  /*IE 8 */

}

Warna Merah tempat meletakkan URL background

Pratinjau dulu untuk melihat apakah gambar sudah sesuai dengan keinginan kita

Kemudian SAVE selesai.