CSS : Picture Blocking by Background

Pernahkah merasa meletakkan gambar di posisi yang tepat namun gambar tak kunjung muncul? Tak perlu merasa frustasi dengan keadaan seperti ini. Ada baiknya melakukan pengecekan akan sintak HTML maupun CSS yang ada di template kita.

Salah satu atribut dalam CSS yang jamak digunakan oleh pencipta template blog adalah menyertakan nilai top ke dalam background image. Dengan tambahan nilai ini maka mau tak mau gambar yang akan dijadikan sebagai bacground akan muncul di posisi paling atas hingga mudah untuk melakukan pemasangan gambar. Namun ini bisa jadi membawa petaka bagi kita yang suka mengedit tampilan blog.

Berikut adalah salah satu tampilan blog yang menggunakan atribut top dan hasilnya bila memasang efek javascript "rain drop" yang pernah dibahas edittag.



Disini terlihat gambar logo edittag tak mampu menembus gambar yang dijadikan background. Gambar logo akan jatuh dalam posisi dibelakang background. Cukup bisa menipu mata. Padahal gambar meluncur jatuh di posisi yang sama dimana gambar background juga bercokol. Untuk "memaksa" agar gambar logo tersebut muncul di atas/depan gambar background ada baiknya edit bagian CSS yang menyebut posisi image background tersebut berada.

Berikut kode CSS-nya :

background:url(gambarbackground.gif) top left repeat-x #d43402;

Hilangkan tulisan merah agar posisi gambar background tak lagi menutupi materi gambar di posisi yang sama. Hingga akan muncul seperti berikut :