Membuat Background Transparan dengan Gambar

Background dari tulisan ini menggunakan gambar yang berekstensi PNG dengan warna hitam dan opacity diset sekitar 40%sehingga kita bisa melihat background di belakangnya, ini yang kita sebut dengan background transparan.

Saat ini banyak desain-desain website menggunakan background yang transparan seperti ini karena memang terlihat lembut dan realistik.

Dalam contoh Membuat Background Transparan dengan Gambar ini caranya cukup simpel, berikut adalah kode HTML-nya:

<html>
<head>
</head>
    <body>
        <div id="konten">
        </div>
    </body>
</html>

Kemudian kita membuat background pada elemen body dan div.

Untuk background elemen body diatur dengan pengaturan CSS sebagai berikut:

background-attachment: fixed; - agar gambar background tidak bergerak ketika kita menggeser scroll bar dan scroll pada mouse.
background-color: #000; - warna background sebagai warna landasan dan akan digunakan ketika gambar tidak ditemukan
background-image: url(lokasi gambar) - lokasi dan gambar background yang akan dijadikan sebagai background;
background-position: 50% 0%; - membuat gambar agar berada pada posisi bagian atas dan tengah dokumen
background-repeat: no-repeat; - agar tidak ada pengulangan gambar baik secara vertikal maupun horizontal

Bingung?

Oke saya kasih kode CSS yang singkatnya saja:

body {background:#000 url(lokasi gambar) no-repeat fixed top center;}

Sedangkan untuk background elemen div kita atur sebagai berikut.

Dalam contoh ini, kita menggunakan gambar PNG transparan dengan ukurah 5px x 5px warna hitam. Karena ukurannya kecil maka agar dapat menutupi elemen div tersebut maka kita harus membuat pengulangan gambar baik secara horizontal maupun vertikal yang di mulai dari posisi atas sebelah kiri. Jadi nilai dari background-repeat kita isikan dengan repeat.

#konten {background:url(lokasi gambar transparan) repeat top left;}
Bila ingin menambahkan pengaturan CSS lainnya agar terlihat persis seperti contoh ini, maka kode CSS-nya adalah sebagai berikut:
body {
margin:0 auto;
background:#000 url(bg01.jpg) no-repeat fixed top center;
color:#fff;}
#konten {
margin:10px auto;
padding:20px;
width:800px;
border:1px solid #888;
background:url(black-40.png) repeat top left;
}

Berikut adalah kedua gambar yang digunakan dalam membuat background transparan dengan gambar ini. Untuk menyimpan gambar tersebut klik kanan linknya kemudian pilih "save link as" atau "save target as".

- bg01.jpg 980px X 800px besar file 81kb,
- black-40.png 5px X 5px besar file 2kb.

Jika ada komentar atau pendapat silahkan sampaikan melaui comment.
Kembali ke halaman Membuat Background Transparan.


Copyright © 2008 - 2017 HTMLCSSGuides.com