Cara Membuat Background Transparan HTML CSS

Pada tutorial ini kita akan belajar cara membuat background html transparan dengan memanfaatkan css. Maksud dari background transparan ini yaitu ada sebuah div di dalam body yang memiliki warna background transparan atau sedikit transparant, sehingga apabila pada body menggunakan background gambar atau warna maka background tersebut akan terlihat walau tertutup oleh div yang dimaksud ini. Untuk lebih jelasnya kita langsung ke tutorialnya sebagai berikut.

Cara Membuat Background HTML Transparan

Cara Membuat Background HTML Transparan

Sebelum memulai tutorial cara membuat background HTML transparan langkah pertama silakan siapkan sebuah gambar terlebih dahulu, disini saya menggunakan gambar dengan format jpg dan dengan nama image, jadi file bernama image.jpg. Pada gambar ini kamu bisa menggunakan gambar apa saja, namun supaya lebih mudah untuk mengikuti tutorial ini silakan rename gambar tersebut dengan nama yang sama dengan gambar pada tutorial ini yaitu image.jpg. Selanjutnya letakan gambar tersebut didalam folder yang kamu inginkan, disini saya menempatkannya pada directory D:\Cara Kode\Latihan\Transparan, jadi nama folder tempat menyimpan gambar bernama folder Transparan dan image dengan nama image.jpg.

Gambar Contoh Image Didalam Folder Transparan

Selanjutnya silakan tulis contoh kode background transparan dibawah ini pada kode editor favorit kamu, misalnya seperti Notepad++, VS Code, Atom, atau sebagainya. Dan contoh kodenya sebagai berikut:

Setelah semuanya selesai ditulis silakan simpan dengan nama index.html pada directory yang sama dengan file image.jpg yang telah kita persiapkan sebelumnya, contohnya seperti gambar dibawah.

Contoh Gambar File index.html Tersimpan

Selanjutnya silakan buka file index.html tersebut pada browser favorit kamu, disini saya menggunakan Google Chrome. Maka dari kode yang kita tulis diatas mendapatkan hasil sebuah box berwarna merah seperti contoh gambar dibawah ini.

Gambar Hasil Contoh Kode Cara Membuat Background HTML Transparan

Penjelasan Kode

Pada contoh kode tutorial cara membuat background HTML transparan diatas terdapat 2 buah selector CSS, yaitu selector untuk tag body dan selector untuk id box.

  • Pada baris nomor 7 terdapat kode css background: url(‘image.jpg’); yang maksudnya membuat background dengan gambar bernama image.jpg. Gambar tersebut yang kita siapkan sebelumnya.
  • Pada baris nomor 8 terdapat kode CSS background-size:cover; yang berfungsi untuk mengatur ukuran background supaya tampilannya sesuai dengan ukuran layar (full screen) yang menampilkan web tersebut.
  • Pada baris nomor 9 terdapat kode CSS background-attachment: fixed; Kode tersebut berguna apabila konten pada website panjang dan bisa discroll. Maka yang discroll hanya kontennya saja, dan gambar background tidak ikut discroll (gambar tetap diam).
  • Pada baris nomor 11 terdapat kode selector css #box1{} yang maksudnya untuk memilih element HTML yang memiliki id #box1, dan element HTML yang sudah dipilih tersebut akan di manipulasi sesuai kode CSS yang ada didalam kurung kurawal tersebut.
  • Pada baris nomor 11 terdapat kode CSS height: 400px; yang berarti mengatur element setinggi 400 pixel. Pada kontek ini yang diatur adalah div id box1.
  • Pada baris nomor 12 terdapat kode CSS width: 500px; yang berfungsi untuk mengatur lebar element HTML selebar 500 pixel. Dalam kontek ini yang diatur adalah div id box1.
  • Pada baris nomor 13 terdapat kode CSS background: rgba(242, 0, 0, 0.5); Kode inilah kode utama untuk membuat background transparan. Maksud dari kode tersebut adalah mengatur warna background berwarna merah dan memiliki transparan sebesar 50% (0.5).
  • Dan pada baris nomor 15 terdapat kode CSS border: black 2px solid; yang berfungsi untuk membuat border (garis pinggir) dengan warna hitam setebal 2 pixel dan dengan type solid.

Apabila kamu kesulitan untuk mendapatkan warna rgba, maka kamu dapa mengunjungi halaman color picker tool yang ada dihalaman ini. Disini kamu dapat memilih warna rgba secara mudah, dan silakan menuju ke color picker seperti contoh gambar dibawah.

Gambar Contoh Color Picker

Pada contoh gambar color picker diatas jangan lupa geser tuas bagian alpha (yang ditandai dengan kotak merah 1). Dan hasil kode rgbanya pada bagian yang ditandai kotak merah 2, dan kamu dapat copy paste hasil kode tersebut ke dalam kode yang kamu inginkan.

Sekarang silakan pilih kode warna rgba sesuai keinginan kamu. Misalnya disini saya akan mengubah warna rgba menjadi warna seperti contoh gambar yang tampil diatas yaitu rgba(27, 187, 5, 0.39). Maka tinggal ganti kode rgba yang terdapat pada baris nomor 14 dengan kode rgba yang baru ini. Maka tampilannya akan berubah menjadi seperti contoh gambar dibawah.

Contoh Gambar Mengubah Warna RGBA Transparan

Selain itu kamu juga dapat membuat div dengan id box2, box3, atau dengan nama lainnya. Jika ingin membuat transparant silakan terapkan kode css yang terdapat pada contoh kode ini (pada baris nomor 11 sampai 16), tentunya dengan selector css sesuai id box yang ingin dibuat transparant.

Saya kira cukup jelas untuk penjelasan tutorial cara membuat background HTML transparan ini. Apabila kamu memiliki pertanyaan seputar tutorial ini silakan tanyakan pada kolom komentar dibawah. Dan jangan lupa kunjungi tutorial seri HTML dasar atau seri CSS dasar yang mungkin dalam seri tersebut ada tutorial yang menarik buat kamu.


Kolom Komentar

Related Post