TEMPLATE : CARA MELETAKKAN FOTO SEBAGAI BACKGROUND

 TEMPLATE : CARA MELETAKKAN FOTO SEBAGAI BACKGROUND

Kita tentunya sering melihat template-template dari suatu website/blog yang latar belakangnya tidak menggunakan warna yang polos, akan tetapi terbuat dari pola yang berulang dari suatu gambar. Gambar ini disebut sebagai gambar latar belakang. Gambar yang digunakan sebagai latar belakang dapat berupa satu gambar besar yang mengisi layar atau atau gambar kecil (misalnya 50 x 50 piksel) yang berulang secara horizontal dan / atau vertikal.

Gambar yang digunakan sebagai latar belakang, dapat diletakkan di bagian manapun, baik dibagian Body (yang mengisi layar secara penuh),bagian Post, Sidebar, Comment, atau dibagian header (Comment Header).

Sebagai contoh kasus jika kita ingin membuat frame yang ada bayangannya untuk digunakan didalam template (sekarang banyak digunakan di blog-blog), bagaimana melakukannya? Secara garis besar yang pertama dilakuka adalah membuat gambar kecil, yang mempunyai panjang memenuhi lebar template. Kemudian selanjutnya yang kedua adalah, membuat gambar yang ada bayangannya yang ditempatkan disamping kiri dan kanan dan diulang secara vertikal. Gambar ini nantinya diletakkan dibagian outer-wrapper.

Lalu bagaimana kode cara meletakkan gambar sebagai latar belakang yang dapat berulang secara vertikal maupun horisontal?

Kode Peletakkan Gambar Sebagai Latar Belakang:

Misalkan kita ingin menggunakan gambar 100 x 100 piksel sebagai latar belakang di bagian Sidebar1. Apa yang perlu kita lakukan adalah menemukan kode sidebar1 {...} di bagian CSS dan kemudian menambahkan kode yang berwarna merah (kode ada dibawah) tersebut kedalam bagian Sidebar1. Kode yang berwarna biru dibagian bawah, hanyalah contoh kode tambahan saja.

#sidebar1 {
margin: 0px 10px 15px 10px;
padding: 0 0 0 0;
width: 150px;
background: URL(http://the-url-of-your-image) repeat left top;
text-align: left;
}

Kode digunakan "background:..." untuk meletakkan gambar sebagai latar belakang dan berulang baik secara vertikal maupun horisontal. Posisi awal gambar akan berada di posisi paling kiri (left-most) dan atas sendiri (top-most). Format perintah background secara umum adalah

background: URL(http://...) repeat-command x-position y-position;


Perintah Perulangan:

1. no-repeat (gambar tidak diulang)
   
2. repeat (berulang secara horisntal dan vertikal)
   
3. repeat-x (berulang secara horisontal)
   
4. repeat-y (berulang secara vertikal)
   

Perintah Posisi Horisontal (x):

1. left (peletakkan gambar dimulai pada sisi paling kiri)
   
2. center (peletakkan gambar mulai dari tengah)
   
3. right (peletakkan gambar mulai dari sisi paling kanan)
   

Perintah Posisi Vertikal (y):

1. top (peletakkan gambar dimulai dari sisi paling atas)
   
2. center (peletakkan gambar dimulai dari tengah)
   
3. bottom (peletakkan gambar dimulai dari sisi paling bawah)   

Sumber :http://indowhiz.blogspot.com/2012/05/desain-template-blogger-cara-meletakkan.html