Dito PriwantoSetelah mempelajari cara memberikan warna dengan CSS, dalam lanjutan series belajar CSS bagian 6 ini, kami akan membahas cara menggunakan background di CSS.
Dengan menggunakan background CSS, Anda dapat membuat tampilan situs menjadi lebih menarik dan profesional, serta memiliki kebebasan berkreasi untuk meningkatkan estetika pada website Anda. Background CSS memungkinkan Anda menyesuaikan tampilan sesuai kebutuhan spesifik pada situs.
Untuk mengawali series belajar CSS bagian 6 ini, kami akan menjelaskan tentang apa itu background dalam CSS terlebih dahulu, untuk memudahkan Anda dalam memahami panduan ini. Simak artikel berikut untuk informasi lebih lanjut.
Mengenal background CSS
Latar belakang atau background pada sebuah halaman website adalah salah satu elemen penting yang perlu dipikirkan dalam mengembangkan tampilan dan meningkatkan kualitas user interface pada website. Untuk mengaturnya, Anda dapat menggunakan properti background dalam CSS.
Secara umum, penggunaan properti background dibagi menjadi dua jenis, yaitu:
- Background menggunakan warna
- Background menggunakan gambar
Mari kita bahas satu persatu.
BACA JUGA : Kode Warna HTML dan CSS yang Perlu Anda Ketahui
Background CSS menggunakan warna
Sama halnya dengan property lainnya, Anda dapat menambahkan property background di dalam selector kode CSS. Penulisan nilai pada property background yaitu background-color, atau dapat menggunakan property background saja.
Selanjutnya, Anda dapat menggunakan nilai atau value berdasarkan nama warna, kode heksadesimal warna, fungsi rgb(), rgba(), hsl(), dan lain lain.
Berikut contoh penulisan kode htmlnya :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Halo Rumahweb</h1>
<p>Halaman ini menggunakan background gambar</p>
</body>
</html>Kemudian berikut contoh kode css menggunakan nilai nama warna :
body {
background-color: lightblue;
}Kode di atas akan membuat tag body menggunakan background berwarna lightblue atau biru muda. Jika di testing melalui browser, maka akan menampilkan screenshot seperti berikut :
Selanjutnya, berikut contoh penulisan background warna menggunakan nilai kode heksadesimal :
body {
background-color: #7fffd4;
}Kode #7fffd4 adalah nama kode heksadesimal warna yang akan digunakan. Jika di testing di browser akan menampilkan screenshot berikut :
Selain itu anda dapat menggunakan kode warna rgb() atau rgba(), berikut contoh penulisannya :
body {
background-color: rgba(255, 0, 87, 50%);
}Nilai rgba(255, 0, 87, 50%) adalah nilai kode warna rgb dengan transparasi 50%. Jika di testing di browser akan menampilkan screenshot berikut :
Anda dapat menambahkan 2 property background seperti kode berikut :
body {
background-color: pink;
background-color: rgba(255, 0, 87, 50%);
}Hal ini bertujuan agar apabila browser tidak support dengan fungsi rgb() atau rgba(), maka yang akan dieksekusi adalah background yang menggunakan nama warna.
Selain itu, anda dapat menggunakan warna lebih dari satu yang biasanya disebut dengan gradient color. Untuk mencobanya, Anda dapat menggunakan CSS Gradient generator yang ada pada link berikut ini . Kemudian, Anda dapat menyesuaikan warna sesuai dengan keinginan.
Setelah selesai, kode warna css akan tergenerate dan muncul di bawahnya, kemudian dapat diterapkan pada kode css. Berikut contoh kodenya :
body {
background: rgb(63, 94, 251);
background: radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
}Ketika di test akses melalui browser, akan menampilkan screenshot berikut :
Background CSS menggunakan gambar
Penggunaan property background dapat memanfaatkan nilai atau value dari gambar. Gambar yang didapat berupa url / path dari gambar tersebut. Property yang digunakan yaitu background-image, atau anda dapat menggunakan property background saja.
Secara umum, format gambar yang didukung untuk menampilkan gambar yaitu jpg, png, svg, gif, png dll. Sebagai contoh, gambar yang akan digunakan berada di link berikut.
Kemudian, simpan gambar tersebut di folder yang sama dengan file html. Selanjutnya untuk penulisan kode CSS bisa menggunakan script berikut.
body {
background-image: url(pindah-hosting.png);
}Ketika di test akses melalui browser, maka akan menampilkan screenshot seperti berikut :
Nilai value pada property background-image menggunakan fungsi url() yang dapat menambahkan url pada gambar tersebut, anda dapat menggunakan value / nilai url (https://www.rumahweb.com/pindah-hosting-gratis/img/og-pindah-hosting.png).
Menggunakan property background-repeat
Dari hasil sebelumnya, secara default gambar background akan melakukan perulangan atau repeat. Anda dapat mengubahnya agar tidak melakukan perulangan dengan contoh kode sebagai berikut :
body {
background-image: url(pindah-hosting.png);
background-repeat: no-repeat;
}Ketika di test melalui browser, maka tampilannya sebagai berikut:
Dari hasil testing melalui browser, gambar background tidak melakukan perulangan.
Menggunakan property background-position
Property background-position berfungsi untuk menentukan posisi gambar background. Property yang dibutuhkan yaitu background-position-x dan background-position-y.
Pada kedua property tersebut, Anda dapat menggunakan value fixed dalam satuan px. Selain itu, Anda dapat menggunakan nilai atau value seperti right, left, top, down, atau center untuk menentukan posisi gambar.
Berikut contoh penulisan kode CSS-nya :
body {
background-image: url(pindah-hosting.png);
background-repeat: no-repeat;
background-position: 30px 30px;
}Jika di testing melalui browser, maka akan ada jarak antara posisi x dan y yaitu masing masing 30px.
Menggunakan property background-size
Property background-size berfungsi untuk menentukan ukuran gambar dan mengaturnya agar dapat menggunakan ukuran yang valid. Berikut nilai ukuran yang dapat digunakan pada property background-size :
- Menggunakan ukuran fixed dalam satuan ( px, pt, em, rem ).
- Menggunakan ukuran dynamic dalam satuan ( vw, vh ) yang mengikuti ukuran layar.
- Ukuran dynamic contain yang mengikuti ukuran lebar selector.
- Ukuran dynamic cover yang mengikuti ukuran lebar dan tinggi selector.
Berikut contoh penulisan kodenya:
body {
background-image: url(pindah-hosting.png);
background-repeat: no-repeat;
background-size: cover;
}Kemudian jika di testing pada browser, maka tampilannya akan berubah seperti berikut.
Karena menggunakan value cover, maka gambar background akan menutupi seluruh elemen pada selector yaitu body.
Kesimpulan
Background pada sebuah halaman website merupakan salah satu element penting yang membuat website akan lebih menarik untuk dilihat. Karenanya, belajar CSS untuk menampilkan background menjadi salah satu skill yang harus Anda kuasai dengan baik ketika Anda bercita-cita ingin membuat website custom sendiri.
Demikian artikel kami tentang menggunakan background di CSS pada belajar CSS bagian 6. Tunggu series lanjutan belajar CSS bagian 7 yang akan kami publish dalam beberapa hari kedepan. Semoga bermanfaat.
