Background atau latar belakang adalah elemen penting dari suatu web. Yang bikin web itu menarik adalah bagian backgroundnya.
Dengan menggunakan CSS, kita bisa mengganti background web dengan berbagai macam jenis. Misalnya:
Kalau untuk website resmi, biasanya menggunakan background warna. Tapi, jika ingin membuat website untuk portfolio atau company profile yang kreatif, tentu background gambar akan menjadi lebih menarik.
Property Background CSS
Untuk mengganti background CSS, kita tinggal memasukkan property background: kedalam selektor css body. Contohnya:
body {background: black}
Mengapa body? Ingat, struktur html website itu ada <head> dan <body>. Dan semua yang ditampilkan di layar browser adalah apapun yang ada di dalam <body>.
Jadi, <body> itu sendiri adalah kotak area alias canvas kosong yang bisa kita ubah menjadi bentuk apapun.
Di <body> inilah, kita bisa mengatur default tampilan web secara keseluruhan, misalnya: jenis font, warna background, ukuran huruf, dll.
Background Warna dengan CSS
Cara mengganti warna background atau latar belakang web sangat mudah, yaitu hanya tinggal memasukkan porperti background dengan value warna yang diinginkan.
Misal, saya ingin mengganti background menjadi warna biru. Maka kode CSSnya adalah:
File belajar.css
body {
background-color: blue;
}
File belajar.html
<!DOCTYPE html> <html> <head> <title>Background Warna CSS</title> </head> <body> Ini isi teks </body> </html>
Outputnya menjadi:
Note: kamu bisa mengisi value warna dengan menggunakan kode warna html seperti RGB, HEX, CMYK atau nama-nama umum seperti red, blue, green, dll.
Background Warna Gradient
Lalu, bagaimana cara membuat background gradasi warna di web dengan CSS?
Ini agak kompleks ya, karena kita harus mengetahui arah posisi warna gradient. Contoh gradient warna yaitu:
Cara paling mudah adalah menggunakan tools css generator. Buka situs: https://cssgradient.io.
Silahkan berkreasi dengan tools yang disediakan, seperti memilih warna, posisi, jenis, opacity, dll.
Kemudian, tinggal copy kode CSS yang ada dibawahnya. Yang ini:
Klik copy to clipboard dan paste ke dalam selector css tadi. Misal:
body{
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
}
Background Gambar dengan CSS
Kedua kita bisa mengganti background website dengan gambar. Untuk mengubahnya kita tinggal mengganti property background-color menjadi background-image.
body {
background: url(gambar.jpg);
color: white
}
Dengan masih menggunakan file html belajar.html yang sama, hanya saya tambahin <h1> saja. Maka hasilnya akan menjadi:
Yang penting kamu perhatikan adalah property dari gambar yang digunakan.
| property | value | keterangan |
|---|---|---|
| background-attachment |
| Mengatur background apakah posisinya fixed (tetap) atau scroll (mengikuti scrolling atas bawah browser) |
| background-image | url gambar | Memilih gambar yang akan dijadikan background |
| background-origin |
| Mengatur spesifik posisi default gambar |
| background-position |
| Atur posisi awal gambar |
| background-repeat |
| Atur bagaimana gambar diulang (repeat) |
| background-size | &nilai angka bisa: %, px | Mengatur ukuran gambar |
Kalau saya jelaskan semuanya tentu panjang bangeeeetttt. Jadi, silahkan di otak-atik sendiri ya.
Format umum yang digunakan untuk background image adalah: .jpg, .webp, .svg, .gif
mantap