Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 4 : Tabel Satuan Pengukuran di CSS. Pada tutorial kali ini, kita belajar cara menggunakan properti background di CSS.
Anda dapat mengatur properti background elemen berikut :
- Properti background-color digunakan untuk menyetel warna latar belakang sebuah elemen.
- Properti background-image digunakan untuk menyetel gambar latar belakang suatu elemen.
- Properti background-repeat digunakan untuk mengontrol pengulangan gambar di latar belakang.
- Properti background-position digunakan untuk mengontrol posisi gambar di latar belakang.
- Properti background-attachment digunakan untuk mengontrol pengguliran gambar di latar belakang.
- Properti background digunakan sebagai singkatan untuk menentukan sejumlah properti latar belakang lainnya.
Atur Background Color
Berikut adalah contoh yang menunjukkan bagaimana mengatur warna latar belakang untuk suatu elemen :
<html>
<head>
</head>
<body>
<p style = "background-color:yellow;">
Tulisan ini memiliki warna latar belakang kuning.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Atur Background Image
Kita dapat mengatur gambar latar belakang dengan memanggil gambar yang disimpan lokal seperti yang ditunjukkan di bawah ini :
<html>
<head>
<style>
body {
background-image: url("https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png");
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>Halo Dunia!</h1>
</body>
<html>
Browser akan menampilkan hasil sebagai berikut :
Mengulangi Background Image
Contoh berikut menunjukkan cara mengulang gambar latar belakang jika gambarnya kecil. Anda dapat menggunakan nilai ‘no-repeat’ untuk properti ‘background-repat’ jika Anda tidak ingin mengulang gambar, dalam hal ini gambar hanya akan ditampilkan sekali.
Secara default properti ‘background-repeat’ akan memiliki nilai ‘repeat’.
<html>
<head>
<style>
body {
background-image: url("https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Mbah WP</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Contoh berikut yang menunjukkan bagaimana mengulang gambar latar belakang secara vertikal.
<html>
<head>
<style>
body {
background-image: url("https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>Mbah WP</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Contoh berikut menunjukkan cara mengulang gambar latar belakang secara horizontal.
<html>
<head>
<style>
body {
background-image: url("https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>Mbah WP</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Atur Posisi Background Image
Contoh berikut mendemonstrasikan cara mengatur posisi gambar latar belakang 100 piksel dari sisi kiri.
<html>
<head>
<style>
body {
background-image: url("https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png");
background-position:100px;
}
</style>
</head>
<body>
<p>Mbah WP</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Contoh berikut mendemonstrasikan cara mengatur posisi gambar latar belakang 100 piksel dari sisi kiri dan 200 piksel dari atas.
<html>
<head>
<style>
body {
background-image: url("https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png");
background-position:100px 200px;
}
</style>
</head>
<body>
<p>Mbah WP</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Atur Background Attachment
Background attachment menentukan apakah gambar latar belakang tetap atau bergulir dengan sisa halaman.
Contoh berikut menunjukkan cara mengatur gambar latar belakang tetap.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
<p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
<p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
<p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
<p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
<p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
<p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
<p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
<p> Gambar latar belakang tetap. Cobalah untuk menggulir halaman ke bawah.</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Contoh berikut menunjukkan cara mengatur gambar latar bergulir.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png');
background-repeat: no-repeat;
background-attachment:scroll;
}
</style>
</head>
<body>
<p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
<p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
<p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
<p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
<p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
<p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
<p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
<p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
<p> Gambar latar belakang bergerak. Cobalah untuk menggulir halaman ke bawah.</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Shorthand Property
Anda dapat menggunakan properti background untuk mengatur semua properti background sekaligus. Sebagai contoh :
<p style = "background:url(https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png) repeat fixed;"> Pharagraf ini bernilai fixed repeated background image. </p>
Semoga tutorial ini membantu Anda mempelajari cara menggunakan properti background di CSS untuk mendesain dokumen HTML.
