Pada bahasa pemrograman HTML dapat menerapkan gambar latar atau biasa disebut background image, sebetulnya tidak hanya untuk gambar saja tapi bisa juga menggunakan video latar atau biasa disebut background video. Dalam menampilkan latar belakang ini dapat diterapkan di CSS inline yaitu langsung di file HTML nya, CSS internal yaitu menerapkannya di bagian style tapi masih didalam file HTML atau menggunakan CSS eksternal yang biasa disimpan sebagai style.css.

Untuk menggunakan latar belakang media seperti ini tentu harus menyiapkan medianya terlebih dahulu, misalnya disini saya contohkan menggunakan latar gambar maka siapkan gambar yang ingin dijadikan latar dan simpan di folder project yang bersangkutan misalnya disimpan di folder /images/.

Tutorial ini akan menjelaskan bagaimana menggunakan background dengan penjelasan lengkap, silahkan simak satu persatu.

Menerapkan Background

Setelah siap, silahkan tambah kode CSS berikut untuk menerapkan latar belakang:

background: url(../images/bg-header.jpg);

Terapkan kode tersebut pada bagian / kolom / div / sejenisnya untuk menampilkan background pada bagian tersebut, misalnya pada bagian class / id header maka terapkan pada class / id header. Pastikan dalam pemanggilan direktori gambarnya tepat /images/bg-header.jpg jangan sampai salah, panggil gambar dengan menyebutkan lokasi dimana gambar yang ingin dijadikan background itu disimpan.

Sekarang bagian header sudah memiliki latar belakang berupa gambar, begitu pun jika ingin menerapkan gambar latar video.

Background Full & Rapih

Ketika menerapkan background biasanya tidak langsung terlihat rapih ini tergantung dari ukuran media yang dijadikan background, daripada merubah / mengedit ukuran medianya lebih baik tambahkan kode berikut setelah kode CSS diatas:

background-size: cover;

Artinya bacground tersebut akan dibuat cover (membungkus) dan secara otomatis background menyesuaikan bentuk dari posisi dimana background diterapkan.

Transparansi Background

Pada beberapa kasus mungkin memerlukan hal ini untuk membuat latar belakang sedikit transparan dengan meningkatkan atau mengurangi tingkat kegelapan / transparansi. Namun untuk menggunakan transparansi background ini ada sedikit perbedaan kode dengan yang diatas, silahkan terapkan kode seperti ini pada CSS:

.header {
   position: relative;
   display: block;
}
.header::after {
   content: "";
   background: url(../images/bg-header.jpg);
   opacity: 0.1;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   background-size: cover;
}

Karena saya menerapkan background di class header maka kode ini menggunakan .header, silahkan ganti dengan nama kolom dimana kalian menerapkan background tersebut. Tingkat transparansi dapat diatur dibagian opacity, nilai opacity ini dari 0 (nol) sampai 1 (satu) saja. Semakin besar nilai opacity maka semakin jelas background nya.

Kemudian terapkan background-size seperti biasa untuk membuat latar belakang tersebut menengah dan rapih, jangan lupa tulis juga kode lainnya atau cukup copy saja code diatas dan tempelkan di project kalian.

Jika kode diatas tidak berfungsi, bisa tambahkan z-index dibagian .header::after yang merupakan tingkat kedalaman / ketinggian sebuah layer misalnya terpkan z-index: -1. Nilai z-index ini harus kurang dari ketinggian header (kolom dimana kalian menerapkan background), klik disini untuk memahami lebih lanjut tentang fungsi z-index.

Warna Overlay Pada Background Media

Selain menerapkan gambar / video background, kita juga dapat memberikan sedikit sentuhan warna diatas background media tapi tetap menjadi background (tidak merusak property yang ada dibagian atas background).

Terdapat 2 cara untuk melakukan hal ini yaitu 1. membuat class overlay / layer baru kemudian diletakkan antara index background & index properti diatas background, 2. memberikan nilai warna menggunakan linear gradient (garis gradiasi) pada background. Saya lebih senangkan membagikan cara yang paling mudah, makanya kita gunakan cara nomor 2 saja.

Sebelumnya, kita hanya menerapkan background: url() saja kan ? Kali ini kita tambahkan nilai CSS sebelum url() tersebut, seperti ini:

background: linear-gradient(rgba(255,0,0,0.45),rgba(0,44,176,0.45),rgba(0,144,0,0.45),rgba(0,0,76,0.45), rgba(0,0,213,0.45)), url(../images/bg-header.jpg);

Save dan lihat hasilnya, namanya gradiasi tentu menggunakan jenis pewarnaan RGBA. Silahkan sesuaikan warna gradiasi ini sesuai keperluan, warna ini akan muncul diantara background dan properti asli diatas background nya misalnya kolom pencarian seperti contoh gambar dibawah ini: (lihat gambar).

Perhatikan pada bagian gambar latar di header terdapat warna gradiasi bergaris horizontal tapi tidak begitu terlihat, silahkan atur pada bagian gradiasi RGBA tadi untuk mengatur warna dan ketebalan warna.

Masih bingung ? Lihat : Video tutorial cara membuat background dengan gambar / video.

Itulah 4 poin yang biasa diperlukan dalam pembuatan latar belakang / background di HTML CSS, dalam pembuatan background gambar akan sama persis dengan apa yang dijelaskan diatas tapi ketika menggunakan video ada sedikit perbedaan dalam penyesuaiannya (jika diperlukan) seperti autoplay.

Silahkan lihat disini untuk memahami penerapan media termasuk video di HTML (bisa dimanfaatkan kodenya dalam penerapan background video).

Selamat mencoba !