Seperti yang kita ketahui, background default element html adalah transparent. dengan perintah CSS, kita dapat mengubah background element dengan lebih leluasa, baik dengan background gambar (image)
ataupun hanya sekedar background warna saja. semua itu dapat di lakukan dengan perintah CSS.
Ada beberapa property CSS Background yan bisa kita pakai untuk mengatur background element html, antara lain sebagai berikut:
Property Background-color CSS
property ini di gunakan untuk mengatur warna background suatu element html. ada tiga cara untuk mendefinisikan value untuk properti background-color yakni mengunakan nama warnanya, satuan rgb dan satuan Hexdecimal. masing-masing contoh penggunaan value warna untuk property Backgroun-color sebagai berikut:
Contoh property Background-color dengan value nama warna
<html>
<head>
<title></title>
<style type="text/css">
p{
background-color:blue;
}
</style>
</head>
<body>
<p>contoh property background-color dengan value nama warna</p>
</body>
</html>
Contoh di atas background-color:blue; value kita sebutkan langsung nama warnanya. silahkan anda coba nama warna lainnya sesuai dengan keinginan anda.
Contoh property Background-color dengan value satuan warna rgb (red,green,blue).
<html>
<head>
<title></title>
<style type="text/css">
p{
background-color:rgb(0,0,255);
}
</style>
</head>
<body>
<p>contoh property background-color dengan value nama warna</p>
</body>
</html>
Contoh di atas background-color:rgb(0,0,255); value kita definisikan dengan satuan rgb. untuk penjelasan satuan warna rgb, sudah saya jelaskan di artikel sebelumnya.
Contoh property Background-color dengan value HEX (HexDecimal)
<html>
<head>
<title></title>
<style type="text/css">
p{
background-color:#0000FF;
}
</style>
</head>
<body>
<p>contoh property background-color dengan value nama warna</p>
</body>
</html>
Contoh di atas background-color:#0000FF; value kita definisikan dengan satuan hexdecimal. satuan warna ini juga sudah saya jelaskan di artikel sebelumnya.
Property Background-Image CSS
Selaian background warna, kita juga bisa memberikan background berupa gambar terhadap element html.
Contoh penggunaan property background-image sebagai berikut:
Contoh property background-image CSS
<html>
<head>
<title></title>
<style type="text/css">
body {
background-image: url("GambarKu.jpg");
}
</style>
</head>
<body>
<p>contoh property background-color dengan value nama warna</p>
</body>
</html>
Contoh di atas url("GambarKu.jpg"); merupakan value background-image untuk memanggil file gambar GmbarKu.jpg di dalam memory. jika file gambar berada di file hosting, kita harus menuliskan alamat url gambar kita.
Tidak selalu file gambar berekstansi jpg saja yang bisa kita gunakan, kita juga bisa menggunakan gambar dengan ekstansi png dan gif. silahkan anda coba sendiri di komputer atau smartphone anda agar lebih memahami CSS bacground untuk html.
Property Background-repeat CSS
Property ini di gunakan untuk mengulang tampilan background gambar sampai memenuhi ruang element html yang di set. property Background-repeat memiliki dua value yakni repeat-x, repeat-y dan no-repeat. penjelasan untuk masing-masing value, langsung kita akan bahas dalam contoh program sederhana di bawah ini.
Contoh Property background-repeat dengan valaue repeat-x
<html>
<head>
<title></title>
<style type="text/css">
body {
background-image: url("GambarKu.jpg");
background-repeat:repeat-x;
}
</style>
</head>
<body>
<p>contoh property background-color dengan value nama warna</p>
</body>
</html>
Value repeat-x berfungsi mengulang gambar secara horizontal dari kiri ke kanan samapi memenuhi ruang element html.
Contoh property Background-repeat dengan value repeat-y
<html>
<head>
<title></title>
<style type="text/css">
body {
background-image: url("GambarKu.jpg");
background-repeat:repeat-y;
}
</style>
</head>
<body>
<p>contoh property background-color dengan value nama warna</p>
</body>
</html>
Value repeat-y berfungsi mengulang background secara vertical dari atas ke bawah sampai memenuhi ruang element html yang di set.
Contoh property background-repeat dengan value no-repeat
<html>
<head>
<title></title>
<style type="text/css">
body {
background-image: url("GambarKu.jpg");
background-repeat:repeat-y;
}
</style>
</head>
<body>
<p>contoh property background-color dengan value nama warna</p>
</body>
</html>
Value no-repeat mengintruksikan kepada web browser agar tidak mengulang background.
Property Background-position CSS
Property ini berfungsi mengatur letak background di dalam element saat di tampilkan. property ini memeiliki beberapa value antara lain center, right, left, bottom dan top. contoh penggunaan property background-position dan valuenya saya contohkan program sederhana di bawah ini:
Contoh property background-position CSS
<html>
<head>
<title></title>
<style type="text/css">
body {
background-image: url("GambarKu.jpg");
background-repeat:no-repeat;
background-position:center;
}
</style>
</head>
<body>
<p>contoh property background-color dengan value nama warna</p>
</body>
</html>
Property background-position:center; akan mengatur posisi background di tengah element html.
Kita juga bisa memberi lebih dari satu value di property Background-position ini. contoh:
Contoh property Background-position dua value
<html>
<head>
<title></title>
<style type="text/css">
body {
background-image: url("GambarKu.jpg");
background-repeat:no-repeat;
background-position:left top;
}
</style>
</head>
<body>
<p>contoh property background-color dengan value nama warna</p>
</body>
</html>
Property Background-attachment CSS
Property ini berfungsi menentukan letak background saat terjadi scroll pada element. property ini memiliki dua value yakni Scroll dan fixed.
property ini biasanya sering di gunakan pada background element body dengan gambar sekala besar. cara penggunaan background-attachment dan valuenya perhatikan contoh program sederhana di bawah ini:
Contoh property Background attachment denagan value scroll
<html>
<head>
<title></title>
<style type="text/css">
body {
background-image: url("GambarKu.jpg");
background-repeat:no-repeat;
background-position:center;
background-attachment:scroll;
}
</style>
</head>
<body>
<p>contoh property background-color dengan value nama warna</p>
</body>
</html>
Value scroll akan membuat background bergerak mengikuti element ketika terjadi scroll di halam dokument html atau web.
Contoh property background-attachment dengan value fixed
<html>
<head>
<title></title>
<style type="text/css">
body {
background-image: url("GambarKu.jpg");
background-repeat:no-repeat;
background-position:center;
background-attachment:fixed;
}
</style>
</head>
<body>
<p>contoh property background-color dengan value nama warna</p>
</body>
</html>
Value fixed di property Background-attachment akan membuat background
tetap pada posisinya ketika terjadi scroll pada elemet yang di set.
Untuk mempersingkat penulisan perintah css seperti contoh-contoh di atas, kita dapat meringkas penulisan perintah CSS seperti contoh di bawah ini:
Backgroud shorthand property CSS
<html>
<head>
<title></title>
<style type="text/css">
body {
background: #0000ff url("GambarKu.jpg") no-repeat left top;
}
</style>
</head>
<body>
<p>contoh property background-color dengan value nama warna</p>
</body>
</html>
Contoh di atas background: #0000ff akan memberi background warna biru pada element body jika background gambar url("GambarKu.jpg")
gagal di muat.