Membuat Background Transparan

Membuat background yang transparan dalam HTML dapat kita lakukan dengan menggunakan CSS maupun gambar.

Membuat background transparan dengan CSS.

Untuk membuat background transparan dengan CSS dapat menggunakan style CSS dengan properti opacity dan background dengan nilai rgba. Kedua properti tersebut merupakan properti dari CSS3.

Kekurangan dari kedua properti diatas adalah tidak mendukung Internet Explorer 8. Untuk properti opacity W3school memberikan solusinya dengan menggunakan filter:alpha.

filter:alpha(opacity=nilai dalam %);

Untuk properti background dengan nilai rgba belum bisa jalan di IE. Dan perlu diperhatikan juga, bila menggunakan filter diatas maka dokumen CSS kita tidak akan memenuhi standar CSS3 alias tidak valid.

Ikuti link berikut ini untuk melihat contoh-contoh dan untuk mengetahui lebih lanjut tentang membuat background transparan dengan CSS.

Membuat background transparan dengan gambar.

Untuk gambar yang transparan dengan pengaturan opacity dapat di buat di program grafik seperti Photoshop atau Firework dalam format PNG.

Menggunakan gambar yang transparan ini lebih baik karena mendukung CSS2.1 dan dapat dijalankan di berbagai browser modern saat ini termasuk juga di IE7.

Problemnya adalah untuk IE6 dan versi dibawahnya belum mendukung penggunaan gambar PNG yang transparan ini.

Jika anda perduli dengan IE6 bisa mencari solusinya dengan menggunakan javascript atau jquery yang tidak akan di bahas dalam modul ini.

Klik link berikut untuk melihat langsung contoh dari membuat background transparan dengan gambar.

Bonus bagi pengguna Firework,

Berikut adalah cara membuat gambar transparan untuk background dengan Firework CS3, untuk Photoshop silahkan cari sendiri tutornya. 😉

Membuat gambar transparan dengan Firework CS3.

Pertama buat Dokumen baru dengan ukuran 100pxX100px, pada Canvas color pilih transparent.

Background Transparan PNG 01

Selanjutnya dari Vector pilih "Rectangle Tool" dan gambar sebuah kotak pada Canvas.

ackground Transparan PNG 02

Pada Properties set width dan height = 100 kemudian X,Y = 0. Untuk warna terserah mau warna apa.

ackground Transparan PNG 03

Klik gambar untuk mengaktifkan maka pada jendela Properties sebelah kanan akan muncul pengaturan opacity tepat diatas Filters, atur posisinya sekitar 50.

ackground Transparan PNG 04

Dari menu "File" pilih "Save As", kemudian untuk File name masukkan nama filenya pada "Save as type" pilih "Flattenet PNG". Sebelum di simpan tekan tombol Option maka akan muncul jendela seperti berikut.

ackground Transparan PNG 05

Untuk "type of transparency" pilih "Alpha Transparency", tekan "Ok" baru disimpan (Save).

Sekarang gambar tesebut sudah dapat digunakan sebagai contoh untuk membuat background transparan dengan gambar.

Selamat mencoba.

Posted on February 29th, 2012 in Belajar HTML by Masim man

Post a comment

6 Responses to “Membuat Background Transparan”

  1. ayies said:

    wah… terima kasih infonya gan….

  2. ayies said:

    TERIMA KASIH GAN

  3. yunie said:

    Pak, tolong saya sudah berusaha mencari info agar web saya transparant tapi tidak juga bisa… Sy newbe & terlalu penasaran sekali untuk mentransparankan web saya

    Mohon bantuannya sangat… Silakan berkunjung ke web sy utk tahu lebih lanjut… puyeng bgt

    Many many thanks anyway,

    • Masim man said:

      Oke, pertama background-nya harus di set fixed agar gambarnya diam (tidak bergerak).
      Caranya, masuk ke pengaturan background, nanti ada Display Options,
      Untuk background position pilih “Center”, untuk Background Repeat pilih “No Repeat” kemudian untuk Background Attachment pilih “Fixed”

      Selanjutnya edit style.css, cari comment seperti berikut:

      /* =Global —- */

      Didalam comment tersebut cari pengaturan CSS untuk #page

      #page {
      background: #fff;
      }

      Ganti menjadi:

      #page {
      background:transparent;
      }

  4. Tengkiyu Gan

    Opss jangan lupa berkunjung ke saco-indonesia.com

  5. Moch Subkhan said:

    Penginnya ada screenshoot tampilan transparannya gan. Thanks infonya

Back to top