WONGSAMIN BLOG: CARA MEMBUAT BACKGROUND GAMBAR TRANSPARAN DI JOOMLA.

Dalam kehidupan masyarakat dari jaman dulu sampai sekarang, maksud baik saja belumlah cukup. Maksud tersebut perlu disampaikan secara baik pula agar menciptakan kesan positif yang cukup membekas dihati penerima. Ibarat jualan nasi pecel meskipun rasanya enak, tetapi kalau disajikan di atas piring yang tidak bersih pastilah akan menghilangkan selera makan pelanggan. Demikian pula halnya dengan website / blog, perlu dibuat semenarik mungkin akan memberikan kesan pertama yang positif dan membuat para pengunjung tertarik untuk membaca artikel yang kita sajikan.

Untuk membuat website/blog dapat tampil menarik, selain dapat disiasati dengan pemilihan template, penyajian gambar header, pemilihan menu dropdown dan penyajian image gallery, dapat pula dilakukan melalui pemilihan background yang menarik, bisa berbentuk warna ataupun gambar/image. Untuk menyajikan website kita dengan background gambar ternyata sangatlah mudah. Ikutilah langkah-langkah berikut, isya Allah jadi.

1. Simpanlah gambar (jpg, png, gif) yang anda pilih di sebuah folder. Karena saya menggunakan Joomla, gambar saya simpan di folder C:/Xampp/htdocs/Joomla/Template/Beez-20/images.

2. Silahkan log in ke website anda

3. Pilih Extension -> Klik Template Manager -> lihat di kolom template (bukan yang kolom style) -> pilih dan klik Active Template anda.

4. Pilih dan klik “edit css/personal.css, sehingga akan muncul layar yang menampilkan css template anda.

5. Dibawah note “general”, lihat kode css bagian “body” berikut

body

{

background-color: #FFFFFF;

color: #FFFFFF;

font-family: arial, helvetica, sans-serif;

}

6. Gantilah kode css “background-color: #FFFFFF;” dengan kode berikut

{

background: url(../images/namafile.png);

color: #FFFFFF;

font-family: arial, helvetica, sans-serif;

}

7. Save dan lihatlah efeknya pada tampilan website anda

Jika gambar pilihan anda sudah menjadi background, maka teks artikel anda yang berwarna hitam akan menjadi kurang terang jelas terlihat jika overlap dengan bagian gambar background yang berwarna hitam. Oleh karena itu anda masih perlu menyempurnakan dengan mengubah beberapa kode css untuk menghasilkan kontras antara teks artikel dengan background. Caranya,

8. Ubah kode css warna teks (color: #444444;) dengan kode warna lain, misalnya #FFFFFF; untuk mendapatkan teks warna putih. Kode css tersebut adanya di bawah bagian “body”

#all
{
  color: #444444;
  border:solid 0px ;
  padding-top:0px;
}

Kode warna teks #....... atau sering disebut kode HEX selengkapnya dapat anda cari di sini.

9. Save dan lihatlah efeknya pada tampilan website anda.

Kemungkinan besar hasilnya belum memuaskan, karena sulit sekali mendapatkan kontras antara satu warna teks dengan gambar yang warnanya beraneka macam. Untuk itu silahkan lanjutkan dengan membuat layer background pada wilayah isi (content area) dengan warna yang anda sukai dengan menambahkan kode css baru dibawah kode css nomor 8 di atas dengan kode “background: #......; sehingga menjadi :

#all
{
  color: #444444;
  border:solid 0px ;
  padding-top:0px;
  background: #..............;
}

10. Save dan lihatlah efeknya pada tampilan website anda.

Kemungkinan besar hasilnya juga masih belum memuaskan, karena content area tertutup dengan warna pilihan anda. Ini karena warna sistim HEX adalah warna solid. Demikian pula jika anda menambahkan dengan kode/tulisan “transparent” di belakang kode warna HEX, maka yang muncul adalah tranparan 100%. Untuk itu silahkan ubahlah kode di atas menjadi berikut:

#all
{
  color: #444444;
  border:solid 0px ;
  padding-top:0px;
  background:rgba(0, 0, 0, 0.55);
}

11. Save dan lihatlah efeknya pada tampilan website anda.

Mudah-mudahan anda puas, jika tidak puas silahkan mainkan 3 angka sebagai kode warna dan mainkan angka ke empat/terakhir sebagai kode intensitas opacity/transparansi. Saya kira ini adalah kelebihan dari kode warna sistim RGB. Untuk lebih jelasnya tentang kode RGB silahkan lihat di sini.

12. Silahkan coba-coba sendiri dengan warna teks link, heading dsb. Sehingga tampilan website anda bisa cantik, minimal seperti gambar berikut yang aku punyalah.