Kita bisa memberikan highlight atau latar belakang teks dengan properti background atau background-color. Kalau belum paham tentang cara pemberian warna, buka lagi tulisan saya tentang penggunaan warna pada CSS. Berikut ini contoh penggunaan properti background dalam style CSS.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
#styleku{
background-color : #FF00FF;
}
.styleku{
background : blue;
}
</style>
</HEAD>
<BODY>
<H2>Background</H2>
<p class="styleku">
Ini adalah paragraf 1.
</p>
<p id="styleku">
Ini adalah paragraf 2.
</p>
<p>
Ini adalah paragraf 3.
</p>
<p>
Ini adalah paragraf 4.
</p>
</BODY>
</HTML>
Contoh di atas memberikan warna latar belakang pada elemen HTML dengan tag <p> yang memiliki class "styleku" dan juga id "styleku". Jika kita ingin menerapkan properti background sebagai latar belakang sekelompok elemen HTML, kita bisa menggunakan tag <div> untuk mengapit elemen-elemen HTML lainnya.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
.styleku1{
background : #FF00FF;
}
.styleku2{
background : blue;
}
</style>
</HEAD>
<BODY>
<H2>Background</H2>
<div class = "styleku1">
<p>
Ini adalah paragraf 1.
</p>
<p>
Ini adalah paragraf 2.
</p>
</div>
<div class="styleku2">
<p>
Ini adalah paragraf 3.
</p>
<p>
Ini adalah paragraf 4.
</p>
</div>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
.styleku1{
background : #FF00FF;
}
.styleku2{
background : blue;
}
</style>
</HEAD>
<BODY>
<H2 class="styleku1">Background</H2>
<div>
<p class ="styleku1">
Ini adalah paragraf 1.
</p>
<p>
<span class ="styleku1">
Ini adalah paragraf 2.
</span>
</p>
</div>
<div class ="styleku2">
<p>
Ini adalah paragraf 3.
</p>
<p>
Ini adalah paragraf 4.
</p>
</div>
</BODY>
</HTML>
Selain properti-properti yang saya gunakan di atas, masih ada beberapa properti lain yang berkaitan dengan background. Berikut ini adalah properti yang berkaitan dengan background beserta nilai-nilainya :
- background : Versi singkat dari background-color dan background-image. Nilainya bisa berupa warna atau url gambar.
- background-color : Warna latar belakang. Nilainya bisa berupa konstanta warna, nilai hexadesimal, fungsi RGB, atau fungsi HSL.
- background-image : Gambar latar belakang. Nilainya adalah fungsi url yg berisi nama file.
- background-repeat : repeat-x | repeat-y | no-repeat | initial | inherit
- background-position : left | right | top | bottom | center | initial | inherit
- background-attachment : fix | scroll | local | initial | inherit
- background-size : ukuran | persentase | cover | contain | auto | initial | inherit