Cara menggunakan html png transparent background

Menampilkan sebuah gambar tentu menjadi hal penting dalam mendesain sebuah halaman website. Konten yang memiliki bentuk visual lebih menarik dari pada konten yang seluruhnya hanya berisi teks. Semua itu bisa diatasi dengan menggunakan teknik CSS Background Image.

Table of Contents Show

Langkah 1: Buat Halaman HTML
Langkah 2: Buat File CSS
Langkah 3: Opsi CSS Background Image
Tampilan Background Image Secara Penuh
Background Image Fixed (tidak dapat di-scroll)
Background Image Tanpa Pengulangan (no-repeat)
Background Image dengan Gradient Warna
Linear Gradient – Basic
Linear Gradient – Derajat
Linear Gradient – Multi Color
Contoh Penggunaan Background Gradient
Background Gradient pada Heading

background-image adalah teknik pada css untuk menampilkan gambar menjadi latar belakang alias background, baik itu pattern maupun gambar ukuran penuh.

Hmm.. menarik juga. Bagaimana caranya? Mari kita pelajari sekarang!

Langkah 1: Buat Halaman HTML

Pertama kita harus membuat sebuah halaman html sederhana.

Silahkan buka Notepad teman-teman dan ketikan kode html berikut.

Kode HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Background Image</title>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
    <h2>Hello CSS!</h2>
</body>
</html>

Simpan dan beri nama index.html.

Langkah 2: Buat File CSS

Aku lebih sering membuat folder untuk menyimpan file css maupun image sendiri agar lebih terstruktur rapih.

Untuk itu, silakan kamu buat dua buah folder dan beri nama css dan images dalam direktori folder projek kamu.

Buatlah sebuah file CSS dengan nama style.css.

Kemudian letakan ke dalam folder css seperti gambar diatas.

Buka file style.css dan ketikan kode berikut.

Kode CSS:

body {
     background-image: url('../images/contoh-gambar.jpg');
}

Perhatikan cara penulisan direktori diatas.

Aku menggunakan tanda ../ karena folder images aku letakan diluar folder css.

Apabila kamu membuat folder images di dalam folder css (tidak direkomendasikan), maka penulisannya harus seperti ini:

Kode CSS:

body {
     background-image: url('images/contoh-gambar.jpg');
}

Simpan dan buka file index.html yang sebelumnya kita buat.

Hasilnya akan seperti gambar berikut.

Langkah 3: Opsi CSS Background Image

Ada beberapa cara untuk mengatur image yang telah kita ubah menjadi background dengan css.

Diantaranya adalah:

Tampilan Background Image Secara Penuh

Kode CSS:

body {
	color: #fff;
	background-image: url('../images/contoh-gambar.jpg');
	background-size: cover;     /* Tambahkan baris berikut */
}

Background Image Fixed (tidak dapat di-scroll)

Kode CSS:

body {
     color: #fff;
     background-image: url('../images/contoh-gambar.jpg');
     background-size: cover;
     background-attachment: fixed;     /* Tambahkan baris berikut */
}

Background Image Tanpa Pengulangan (no-repeat)

Kode CSS:

body {
     color: #fff;
     background-image: url('../images/contoh-gambar.jpg');
     background-size: cover;
     background-attachment: fixed;
     background-repeat: no-repeat;     /* Tambahkan baris berikut */
}

Background Image dengan Gradient Warna

Penggunaan css background-image juga dapat dipakai untuk menampilkan warna gradient atau gradasi.

Cara ini biasa diterapkan pada elemen button.

Ada 2 tipe gradasi pada css, yaitu Linear Gradient dan Radial Gradient.

Linear Gradient, tipe gradasi warna yang menggunakan opsi arah (atas / bawah / kiri / kanan / diagonal / derajat).
Radial Gradient, tipe gradasi warna yang ditentukan dari titik tengah suatu elemen.

Linear Gradient – Basic

Dasar penggunaan linear-gradient secara default dimulai dari atas ke bawah.

Kita akan coba terapkan pada sebuah elemen button.

Syntax:

background-image: linear-gradient(warna atas, warna bawah);

Kode CSS:

button.gradient {
    background-image: linear-gradient(orange, red);
}

Kode HTML:

<body>
    <button class="gradient">Hello CSS!</button>
</body>

Hasil akan seperti berikut:

Linear Gradient – Derajat

Teknik menggunakan css linear-gradient dengan memakai derajat.

Nilai derajat ditulis dengan deg yaitu singkatan dari degree.

Syntax:

background-image: linear-gradient(derajat, warna awal, warna akhir)

Kode CSS:

button.gradient {
    background-image: linear-gradient(45deg, red, blue)
}

Hasilnya akan seperti berikut:

Linear Gradient – Multi Color

Teknik membuat gradasi warna dengan memakai perpaduan lebih dari 2 warna.

Caranya nggak jauh berbeda dengan contoh-contoh lainnya.

Kita hanya menambahkan opsi warna pada baris linear-gradient tersebut.

Syntax:

background-image: linear-gradient(opsi_arah, warna_1, warna_2, warna_3, warna_dst...);

Kode CSS:

button.gradient {
    background-image: linear-gradient(180deg, red, yellow, green);
}

Hasilnya akan seperti berikut ini:

Contoh Penggunaan Background Gradient

Nah sob, kurang lengkap kayanya kalau kita nggak coba langsung praktekan ke elemen HTML supaya belajar background image jadi makin sip.

Background Gradient pada Heading

Kamu sudah tau belum, sob? Heading (H1, H2, H3, dst) juga bisa kita bikin keren dengan menggunakan background gradient loh.

Kode HTML:

<body>
    <h2 class="heading-gradient">iPad Pro. The world's fastest tablet ever.</h2>
</body>

Kode CSS:

h2.heading-gradient {
    background-image: linear-gradient(90deg, #B92B27, #1565C0);
}

Hasil awal dari kode diatas akan tampak seperti ini:

iPad Pro. The world's fastest tablet ever.

Udah gitu aja? Belum.

Ada kode rahasia supaya warna gradien nya hanya untuk si heading saja, bukan malah menjadi latar. Hehe.

Tambahkan kode berikut pada script css yang telah kita buat.

Kode CSS:

h2.heading-gradient {
    background-image: linear-gradient(90deg, #B92B27, #1565C0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Hasil akhirnya akan seperti ini:

iPad Pro. The world's fastest tablet ever.

Gimana keren nggak, sob?

Selain Heading, kamu juga bisa menggunakannya pada elemen Paragraph <p> yaa..