CARA MEMBUAT BACKGROUND GAMBAR PADA BLOGGER TEMPLATE

BELAJAR MEMBUAT BLOGGER TEMPLATE 11

Jika kita melihat template beberapa template - Kita akan melihat bahwa banyak template menggunakan latar belakang bukan dari warna polos, melainkan dibuat dari pola yang berulang dari suatu gambar. Gambar ini disebut gambar latar belakang (background image). Bisa saja satu gambar besar mengisi atas layar atau gambar kecil (sebut saja 50 x 50 piksel) yang berulang secara horizontal dan / atau vertikal. Hal yang rapi tentang penggunaan, atau embedding gambar latar belakang adalah bahwa kita dapat membuat gambar apapun yang kita inginkan dan menggunakannya di blog kita untuk membuatnya unik dan berbeda dari blog lainnya.

Gambar latar belakang dapat ditempatkan dalam container - baik di dalam kontainer Body (yang mengisi seluruh atas layar), di dalam Post, Sidebar, Comment,, atau bahkan di sebuah header container (sebut saja, Comment Header). Misalnya, jika Kita melihat template ini, Kita akan melihat bahwa Comment Header di bawah posting adalah tombol hijau bulat - foto yang tertanam di dalam Comment Header.

Kita juga dapat menggunakan sebuah gambar untuk membuat bingkai berbayang (sekarang cukup umum di blog). Untuk melakukannya, Kita membuat gambar latar belakang singkat dengan panjang span yang memenuhi seluruh lebar template. Di ujung kanan dan kiri dari gambar latar belakang, Kita dapat membuat pola muram (atau pola yang akan dijadikan frame), dan menambahkan ini di dalam outer-wrapper, lalu diulangi secara vertikal.

Tapi, bagaimana cara untuk menambahkan dan mengulang gambar secara vertikal, horizontal, atau di kedua arah?

MENAMBAHKAN BACKGROUND GAMBAR :

katakan saja kalau kita akan menggunakan gambar berukuran 100 x 100 pixels sebagai background gambar di dalam container image Sidebar1. apa yang perlu dilakukan adalah menemukan kode sidebar1 {...} di dalam CSS Styling dan menambahkan kode yang berwarna merah di bawah ini (kode lainnya hanya contoh 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 "background:..." akan menampilkan gambar dari URL yang kita letakkan dan repeat (mengulanginya) di kedua sisi, vertical dan horizontal. Lokasi gambar pertama adalah di paling atas dan paling kiri. Kode umum untuk memasukkan background gambar adalah :

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


SEMUA PERINTAH PENGULANGAN (REPEAT COMMAND) :

• no-repeat (gambar tudak akan diulangi)
• repeat (diulangi secara vertical dan horizontal)
• repeat-x (hanya diulangi secara horizontal)
• repeat-y (hanya diulangi secara vertikal)

SEMUA PERINTAH POSISI HORIZONTAL (X) :

• left (meletakkan gambar pertama di sisi paling kiri)
• center (meletakkan gambar di tengah-tengah)
• right (meletakkan gambar pertama di sisi paling kanan)

SEMUA PERINTAH POSISI VERTIKAL (Y) :

• top (meletakkan gambar pertama di posisi paling atas)
• center (meletakkan gambar pertama di tengah-tengah)
• bottom (meletakkan gambar pertama di posisi paling bawah)