Pada pembahasan sebelumnya, kita sudah mempelajari tentang properti color, berikutnya kita akan membahas properti background di CSS. Properti background dalam CSS berfungsi untuk memberikan background pada elemen tertentu pada HTML.
Background yang kita berikan pada elemen HTML dapat berupa warna dan gambar. Untuk menggunakan background dengan gambar, kita membutuhkan beberapa properti tambahan untuk mengatur gambarnya. Oleh sebab itu, pembahasan dalam tutorial ini adalah mengenai beberapa properti yang sering digunakan dalam membuat background di CSS.
Background Warna di CSS
Dalam CSS, kita dapat memberikan background warna dengan cara memberikan nilai warna pada properti background seperti nama warna, kode heksa, fungsi rgb(), rgba(), hsl(), dan lain-lain.
Contoh :
Buatlah file baru dengan nama index.html, kemudian isi kode berikut :
<html>
<head>
<title>Background Warna di CSS</title>
<meta content="">
<style>
header {
background-color: yellow;
}
</style>
</head>
<body>
<header>
<h1>Background di CSS</h1>
</header>
</body>
</html>
Kita memberikan warna latar menjadi yellow pada Elemen <header>.
Maka hasilnya :
Background dengan warna gradasi
Selanjutnya kita akan mencoba menggunakan background dengan warna gradasi di CSS. Adapun langkah-langkahnya adalah sebagai berikut :
1. Pertama buat dulu warna gradasinya di website: https://cssgradient.io/
2. Kemudian copy kode CSS gradient yang sudah dapatkan.
3. Lalu ubah kode CSS contoh diatas tadi menjadi seperti ini:
<html>
<head>
<title>Background Warna di CSS</title>
<meta content="">
<style>
header {
background: rgb(200,192,97);
background: linear-gradient(90deg, rgba(200,192,97,1) 0%, rgba(231,24,24,1) 35%, rgba(0,212,255,1) 100%);
}
</style>
</head>
<body>
<header>
<h1>Background di CSS</h1>
</header>
</body>
</html>
Hasilnya :
Keterangan :
Disini kita menggunakan dua properti background sebagai antisipasi jika browser tidak mendukung menggunakan warna gradasi,
background: rgb(200,192,97);
background: linear-gradient(90deg, rgba(200,192,97,1) 0%, rgba(231,24,24,1) 35%, rgba(0,212,255,1) 100%);
Jadi, apabila browser tidak support warna gradasi maka warna background yang digunakan adalah warna dari fungsi rgb().
Background Gambar di CSS
Untuk menggunakan background gambar di CSS, properti yang digunakan adalah background-image atau background saja. Format gambar yang didukung diantaranya: jpg, png, gif, webp, svg, dll.
Contoh :
1. Sebagai contoh, download file gambarnya di Unsplash lalu pilih ukuran small atau medium.
2. Setelah itu, buat file HTML baru dengan nama index.html dengan isi kode berikut.
<html>
<head>
<title>Background Warna di CSS</title>
<meta content="">
<style>
body {
background-image: url('background.jpg');
}
header {
background: rgba(255,255,225, 0.5);
}
</style>
</head>
<body>
<header>
<h1>Background di CSS</h1>
</header>
</body>
</html>
Keterangan :
Pada kode diatas, kita memberikan background gambar pada elemen <body> &memberikan background kuning transparan (80%) untuk elemen <header>.
3. Kembali lagi ke file gambarnya, ubah nama file yang telah didownload menjadi background.jpg
4. Kemudian letakkan di satu folder yang sama dengan file HTML-nya.
5. Buka file HTML-nya, maka hasilnya akan terlihat seperti gambar dibawah ini :
Background Repeat di CSS
Jika gambar backgroung diatas tadi kita perbesar dan perkecil ukuran jendela browsernya, maka hasilnya akan seperti ini:
Secara default gambar background tersebut akan diulang-ulang. Untuk mengatasi hal ini kita dapat menggunakan properti background-repeat.
Properti ini mempunyai beberapa nilai, diantaranya :
- repeat-x artinya mengulang background pada sumbu x aja;
- repeat-y artinya mengulang background pada sumbu y aja;
- no-repeat artinya tidak mengulang background.
Dalam CSS, Properti yang digunakan agar gambar background tersebut tidak diulang adalah ”no-repeat”. Maka kode CSS-nya akan menjadi seperti ini:
body {
background-image: url('background.jpg');
background-repeat: no-repeat;
}
Hasilnya:
Menentukan Ukuran Background
Properti yang digunakan CSS untuk mengatur ukuran background adalah properti ”background-size”. Properti ini memiliki beberapa nilai yang valid, diantaranya :
- px, pt, em, rem (fixed) ukuran dalam angka dan satuan, contoh 200px, 20em.
- vw, vh (dynamic) mengikuti ukuran tinggi dan lebar layar (view port);
- contain (dynamic) mengikuti ukuran lebar elemen;
- cover (dynamic) mengikuti ukuran lebar dan tinggi elemen;
Contoh :
Ubahlah kode CSS background pada contoh sebelumnya menjadi seperti ini:
body {
background-image: url('background.jpg');
background-repeat: no-repeat;
background-size: cover;
}
Hasilnya:
Background Gambar SVG di CSS
SVG (Scaleable Vector Graphic) merupakan format gambar vektor yang menjadi standar di web untuk sekarang ini.
Jika gambar bitmap seperti (jpg, png, gif) yang ukurannya dibatasi dengan piksel, maka SVG dapat kita perbesar maupun perkecil ukurannya, tanpa merusak kualitas dari gambar tersebut.
Sebagai contoh, kita akan menggunakan gambar vektor dari getwave.io.
1. Silahkan buat gambar vektor wave di getwave.io.,
2. kemudian download file SVG-nya.
3. Setelah itu, buat file HTML baru dengan nama index.html dan isi kodenya berikut:
<html>
<head>
<title>Background SVG di CSS</title>
<meta content="">
<style>
body {
background-image: url('wave.svg');
background-repeat: no-repeat;
}
header {
background: rgba(237, 236, 233, 0.4);
}
</style>
</head>
<body>
<header>
<h1>Background SVG di CSS</h1>
</header>
</body>
</html>
4. Kemudian file HTML-nya diLetakkan di satu folder dengan file SVG.
Hasilnya :
Backdrop-filter pada background di CSS
Backdrop-filter adalah properti CSS yang digunakan untuk mendesain web dengan memberikan filter pada background. Konsep ini juga disebut dengan glass morphology design. Walaupun properti tergolong baru dan belum masuk standar CSS, tapi kita sering melihat beberapa website yang sudah menggunakan konsep desain ini.
Beberapa backdrop-filter yang bisa digunakan adalah :
- blur() untuk memberikan efek blur
- brightness() untuk memberikan efek kecerahan;
- contrast() untuk efek kontras;
- drop-shadow() untuk efek bayangan;
- grayscale() untuk efek hitam putih;
- hue-rotate() untuk efek warna hue;
- invert() untuk efek warna negatif;
- opacity() untuk efek transparan;
- saturate() untuk efek sturasi warna;
- sepia() untuk efek warna sepia.
Diantara backdrop-filter diatas, yang perlu digaris bawahi adalah tidak semua browser support properti ini
Sebagai contoh, saya akan menggunakan filter blur, maka kita harus memberikan nilai dengan fungsi blur().
Buatlah file baru dengan nama index.html kemudian, isi dengan kode berikut.
<html>
<head>
<title>backdrop-filter di CSS</title>
<meta content="">
<style>
body {
background-image: url('background.jpg');
background-repeat: no-repeat;
background-size: cover;
}
header {
background: rgba(142, 138, 111, 0.5);
}
article {
background-color: rgba(142, 138, 111, 0.5);
backdrop-filter: blur(10px);
padding: 1rem;
}
</style>
</head>
<body>
<header>
<h1>Properti backdrop-filter pada background di CSS</h1>
</header>
<article>
Backdrop-filter adalah properti yang digunakan untuk
mendesain web dengan memberikan filter pada background.
Konsep ini juga disebut dengan glass morphology design.
</article>
</body>
</html>
Pada contoh ini, kita memberikan efek filter blur (12px) untuk background elemen <article>.
Maka hasilnya:
Begitulah pembahasan mengenai properti background dalam CSS. Untuk artikel selanjutnya kita akan membahas tentang …
