Terdapat dua jenis gambar atau imej yang anda boleh letakkan di blog anda; satu adalah gambar statik, dan satu lagi adalah gambar yang dinamik atau yang boleh bergerak-gerak iaitu dalam bentuk 'gif'. Seperti yang anda boleh lihat sekarang ini, saya menggunakan gambar 'gif' di dalam blog ini dimana gambar latar BlogGimana adalah bergerak-gerak. Kod yang akan digunakan untuk kedua jenis gambar ini adalah sama sahaja, yang membezakannya cumalah jenis gambar yang digunakan. Untuk mendapatkan gambar statik(jpeg, jpg, bmp etc) adalah senang kerana boleh diperolehi terus dari kamera, tetapi untuk gambar 'gif' anda perlu membuatnya terlebih dahulu atau mencari gambar sedia ada di internet.
Kod yang diperlukan untuk meletakkan gambar latar adalah seperti berikut:
background-image: url(http://urlgambaranda);
Contoh(untuk gambar latar blog ini) :
background-image: url(http://img239.imageshack.us/img239/8372/
matrixbloggimanaqs0.gif);
Klik di sini untuk melihat imej tersebut.
Anda boleh memilih untuk meletakkan gambar di beberapa lokasi blog anda(sama seperti tutorial meletakkan warna latar). Lokasi-lokasi tersebut adalah keseluruhan blog, 'header', 'posting', 'sidebar' dan 'footer' setiap lokasi ini boleh diletakkan gambar yang berlainan. Cara-caranya adalah dengan menambah kod di atas beserta url imej di bahagian-bahagian blog anda dalam 'edit html'. Contohnya adalah seperti berikut:
Keseluruhan blog
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
background-image: url(http://urlgambar);
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Header
/* Header
------------------------------------------------
*/
#header-wrapper {
background-image: url(http://urlgambar);
width:900px;
margin:0 auto 10px;
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
}
Gambar untuk header juga boleh di ubah pada bahagian 'Layout' - 'Page Elements'.
Posting/ Main
#main-wrapper {
background-image: url(http://urlgambar);
width: 410px;
float: $startSide;
word-wrap: break-word;
overflow: hidden;
}
Sidebar
#sidebar-wrapper {
background-image: url(http://urlgambar);
width: 220px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
Footer
/* Footer
----------------------------------------------- */
#footer {
background-image: url(http://urlgambar);
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Sekiranya anda cuma mahu satu imej dipamerkan(tiada pengulangan) dan berada ditengah-tengah kawasan yang dipilih, tambahkan kod tersebut di bawah kod tadi:
background-repeat:no-repeat;
background-position:center center;
Contoh untuk 'Posting/ Main':
#main-wrapper {
background-image: url(http://urlgambar);
background-repeat:no-repeat;
background-position:center center;
width: 410px;
float: $startSide;
word-wrap: break-word;
overflow: hidden;
}
Tukarkan background-position:center center; kepada
top center; - untuk letak imej di atas dan di tengah2 atau
bottom center; - untuk letak imej di bawah dan di tengah2.
Semoga berhasil, kalau ada pertanyaan, sila tinggalkan dalam petak komen dibawah.
3 comments:
rajennye awk mgajar org berblog~
sy reti..tp mls
cane eh nk bg rajen
huhuhu
tringin nk jd blogger tgar..tp xpnh tgar2 :P
hehehe
gambar latar boleh letak dlm format jpeg je ke?
Boleh, jpg, jpeg, bmp, gif.
Post a Comment