Oke pada kali ini saya akan coba membahas cara membuat background pada HTML dengan menggunakan css.
Sebelum kita lanjut ke contoh, saya akan jabarkan dulu beberapa property value yang terdapat dalam perintah css “background” ini.
Property value dari dari css background ini adalah
- background-color : yang berarti penetapan warna untuk background.
- background-image: yang berarti lokasi gambar yang akan digunakan oleh background.
- background-position: yang berarti lokasi background (gambar) yang kita inginkan.
- background-size: yang berarti ukuran background(gambar) yang kita inginkan.
- background-repeat: yang berarti apakah background(gambar) ingin diulangkan atau tidak.
- background-origin: yang berarti posisi dari background (image) yang kita inginkan. Hampir mirip dengan background-position tapi cara memposisikan backgroundnya nanti agak berbeda.
- background-clip: yang berarti bagaimana letak atau ukuran background (pewarnaan atau gambar) yang kita inginkan.
- background-attachment: yang berarti posisi background(gambar) ditampilkan dengan fixed(diam) atau scroll (mengikuti arah halaman).
Nah kalau kamu sudah agak paham property value dari css background ini, kita bisa lanjut dengan contoh-contohnya.
Cara Membuat background-color di HTML
Oke sekarang kita akan mencoba membuat HTML yang terdiri dari judul dan teks tapi memiliki latar belakang atau background dengan warna merah. Ini kode yang akan kita buat
<!DOCTYPE html>
<html lang="id">
<head>
<title>Background</title>
</head>
<body>
<h1>Judul Halaman Dengan Background</h1>
<p>Teks halaman dengan background.</p>
</body>
</html>
Hasilnya akan menjadi seperti ini
Hasil HTML tanpa CSS
Setelah itu, mari kita tambahkan CSS untuk merubah “body” agar memiliki warna merah. Disini saya akan menggabungkan css nya langsung didalam file HTML.
<!DOCTYPE html>
<html lang="id">
<head>
<title>Background</title>
<style>
body{background-color: red;}
</style>
</head>
<body>
<h1>Judul Halaman Dengan Background</h1>
<p>Teks halaman dengan background.</p>
</body>
</html>
Maka hasilnya akan menjadi seperti ini
HTML dengan background warna merah di body
Seperti yang kita lihat, CSS yang merubah background body menjadi merah adalah css ini
body{background-color: red;}
Kamu bisa merubah red menjadi semua warna yang kamu inginkan. Bisa dengan warna biasa (dalam bahasa inggris) atau menggunakan warna hex ataupun rgb.
Sekarang kita tambahkan warna lagi untuk judulnya. Disini elemen untuk judul adalah h1, maka kita akan menambahkan css
h1 {background-color:warna yang kamu mau}.
Disini saya akan menambahkan warna hijau untuk background judul. Maka HTML nya akan seperti ini
<!DOCTYPE html>
<html lang="id">
<head>
<title>Background</title>
<style>
body{background-color: red;}
h1{background-color: green;}
</style>
</head>
<body>
<h1>Judul Halaman Dengan Background</h1>
<p>Teks halaman dengan background.</p>
</body>
</html>
Dan hasilnya akan menjadi seperti ini
Nah cukup mudahkan menggunakan css background-color untuk menghias halaman HTML kita.
Sekarang mari kita mencoba untuk membuat background menggunakan image atau gambar.
Cara membuat background dengan image atau gambar dengan html dan css
Oke sebelumnya, kalau kamu ingin mencari gambar-gambar berkualitas untuk background HTML, kamu bisa mencarinya disitus-situs yang ada diartikel ini.
Untuk contoh yang ini saya akan coba menggunakan gambar yang berasal dari Unsplash. Dan untuk HTML nya, saya pergunakan kode HTML diatas namun saya rubah sedikit. Jadinya seperti ini:
<!DOCTYPE html>
<html lang="id">
<head>
<title>Background</title>
<style>
body{background-image:url(https://source.unsplash.com/random/800x600);}
</style>
</head>
<body>
<h1>Judul Halaman Dengan Background</h1>
<p>Teks halaman dengan background.</p>
</body>
</html>
Hasilnya nanti akan menjadi seperti dibawah ini. Namun perlu diingat, saya menggunakan source unsplash yang random, jadi mungkin gambar dikamu nantinya akan berbeda-beda apalagi ketika di reload halamannya.
HTML dengan CSS background-image
Seperti yang kita lihat diatas, background nya sudah menggunakan image. Ini css yang berpengaruh untuk merubah background kita
body{background-image:url(https://source.unsplash.com/random/800x600);}
Secara default, background image akan menggunakan “repeat” di property “background-repeat” nya. Jika kamu tidak ingin background nya tidak tampil berulang di html kamu harus menggunakan property lain.
Cara agar background tampil tidak berulang di HTML
Agar background tidak tampil berulang di HTML, kamu harus memasukan CSS property “no-repeat” di property “background-repeat” nya. Jadi nantinya akan jadi seperti ini:
<!DOCTYPE html>
<html lang="id">
<head>
<title>Background</title>
<style>
body{
background-image:url(https://source.unsplash.com/random/800x600);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Judul Halaman Dengan Background</h1>
<p>Teks halaman dengan background.</p>
</body>
</html>
Dan tampilannya pun akan menjadi seperti ini:
Background tidak berulang di HTML
Jika kamu ingin membuat gambar tersebut menjadi full screen atau menutupi seluruh area, kamu bisa menambahkan css property “background-size:cover” di HTMLnya. Jadi nantinya HTML kita akan menjadi seperti ini:
<!DOCTYPE html>
<html lang="id">
<head>
<title>Background</title>
<style>
body{
background-image:url(https://source.unsplash.com/random/800x600);
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<h1>Judul Halaman Dengan Background</h1>
<p>Teks halaman dengan background.</p>
</body>
</html>
Dan tampilannya nanti akan jadi seperti ini:
Gambar background dengan CSS “background-size: cover”
Jika dirasa tampilannya kurang rapih, kamu bisa melihat artikel ini untuk melihat contoh pembuatan background image fullscreen yang lebih rapih.
Oke, sampai disini mudah-mudahan kamu sudah agak paham ya dengan penggunaan HTML dan CSS background ini. Nanti saya akan coba bahas lagi mengenai HTML dan CSS lebih mendalam lagi.
Kalau kamu tertarik untuk belajar HTML dan CSS ini lebih lanjut, kamu bisa mencoba mengunjungi situs ini.
Disitus itu selain kamu bisa berlangganan kursus-kursus online, kamu juga mendapatkan langganan untuk Digital Asset yang cukup banyak. Mulai dari gambar, musik, video bahkan sampai HTML template juga ada.
