Cara Meletakkan Gambar Latar

Meletakkan gambar latar adalah suatu kemestian bagi blogger persendirian atau 'personal blog'. Banyak blogger suka meletakkan gambar latar untuk membuat blog kelihatan menarik, menambahkan warna pada blog di samping satu kaedah untuk menunjukkan diri seseorang kepada pembaca. Untuk blogger yang suka penampilan, mereka selalunya meletakkan gambar diri mereka sendiri atau gambar-gambar yang berkaitan dengan hidup mereka. Terdapat juga blogger yang suka meletakkan gambar yang berkaitan dengan blog mereka dan ada juga yang meletakkan gambar latar sekadar untuk membuat blog mereka kelihatan lebih menarik.

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.