Tulisan ini merupakan kelanjutan tulisan saya sebelumnya. Dalam bagian ini saya akan menjelaskan bagaimana cara memberi warna background untuk setiap elemen atau container. Mengetahui bagaimana cara memberi warna pada background tentu sangat penting jika kita ingin membuat template sendiri. Seperti dalam tulisan sebelumnya kali ini kita juga akan menggunakan template bawaan dari blogger, yaitu minima.
Untuk menambahkan warna background cukup tambahkan properties background pada kode CSS elemen. Misalnya anda ingin merubah warna background elemen header-wrapper. Kode CSS untuk elemen header-wrapper dari template minima adalah seperti ini:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Sekarang anda tambahkan properties background pada kode kode CSS tersebut, menjadi:
#header-wrapper {
width:660px;
margin:0 auto 10px;
background: yellow;
border:1px solid $bordercolor;
}
Untuk warna sendiri anda bisa menuliskan nama warna. Ada 17 warna yang dianggap valid yaitu aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, dan yellow.
Atau dengan menggunakan kode warna hexadecimal. Hexadecimal adalah sebuah system panamaan warna berdasarkan angka dan huruf. Hexadecimal memiliki 16 digit dimulai dari 0 sampai f
Untuk menggunakan kode hexadecimal anda harus menambahkan tanda “#” sebelum kode hexadecimal. Misalnya #ffffff adalah kode untuk warna putih, #000000 adalah kode untuk warna hitam. Sehingga penulisannya menjadi
background: #000000;
Banyak situs yang menyediakan kode kode warna hexadecimal, silahkan anda mencari sendiri lalu berlatihlah mengutak atik warna background untuk elemen lainnya.
Selain dengan memberi warna anda juga bisa menggunakan gambar pada background. Biasanya untuk header, tetapi elemen lain juga bisa. Untuk menggunakan gambar pada background yang perlu dipersiapkan adalah:
Gambar, tentu saja. Anda bisa menggunakan program picture editor semacam adobe photoshop dll
Dalam membuat gambar yang perlu diperhatikan adalah ukurannya. Buatlah gambar yang sesuai dengan ukuran elemen dimana gambar tersebut akan anda pasang sebagai background.
Setelah memiliki gambar yang perlu anda lakukan adalah mengaploadnya di sebuah image hosting seperti photobucket, imageshack dll. Jika belum memiliki akun di image hosting tersebut daftar aja gratis kok. Setelah diupload anda copy link untuk gambar anda. Ambil yang dari direct link
Misalnya saya mempunyai gambar seperti dibawah ini
Saya membuat ukuran lebar gambar tersebut sebesar 660 pixel sesuai dengan ukuran lebar elemen header-wrapper. Kemudian saya juga telah menguploadnya di imageshack lalu saya ambil kode untuk direct linknya, yaitu
http://img7.imageshack.us/img7/7247/soccershoot.jpg
Sekarang kita telah mempunyai gambar untuk header tinggal memasangnya aja. Untuk memasangnya kita cari kode CSS untuk elemen header-wrapper, kodenya seperti ini
#header-wrapper {
width:660px;
margin:0 auto 10px;
background: yellow;
border:1px solid $bordercolor;
}
Berdasarkan kode CSS diatas elemen header-wrapper telah mempunyai background yang berwarna kuning, seperti yang telah kita tambahkan pada bagian sebelumnya. Untuk menambahkan gambar maka kita rubah kodenya seperti ini
#header-wrapper {
width:660px;
margin:0 auto 10px;
background: #000000 url(http://img7.imageshack.us/img7/7247/soccershoot.jpg)no-repeat top left;
border:1px solid $bordercolor;
}
Saya merubah warna backgroundnya menjadi hitam (#000000). Kode no-repeat artinya gambar hanya ditampilkan satu kali saja dan kode top left berarti posisi gambar berada diatas kiri didalam elemen header-wrapper. Simpan perubahan dan lihat hasilnya. Elemen header-wrapper telah mempunyai background berupa gambar. Bagaimana mudah bukan?. Hal yang sama juga bisa diterapkan untuk semua elemen. Ingat gambar untuk background hendaknya mempunyai ukuran yang sama dengan ukuran elemen, terutama lebarnya.
