7 Properti CSS Untuk Mengatur Background pada Elemen HTML
Untuk mengatur dan menentukan efek Backgorund pada sebuah Halaman Web, Anda bisa menggunakan 7 properti CSS yang masuk dalam kategori Background Properties. Background Properties merupakan sekumpulan properti css yang berguna untuk mengatur efek latar belakang pada suatu elemen.
Anda juga bisa mengatur posisi gambar dari background. seperti mengatur posisi peletakan gambar atau mengatur ukuran gambar. Bahkan Anda juga bisa memerintahkan sebuah gambar untuk membuat perulangan dengan menggunakan properti background-repeat. Baca ulasan lengkapnya beserta contoh penggunaannya pada Artikel ini.
1. All Backgrounds Properties
Sebelum belajar menulis kode CSS untuk mengatur tampilan Latar Belakang pada suatu halaman web, berikut ini ke-7 properti css yang khusus digunakan untuk mengatur maupun menampilkan gambar pada halaman web.
| No | Properti | Deskripsi |
|---|---|---|
| 1 | background-color | memberi warna pada latar belakang |
| 2 | background-image | memberi gambar pada latar belakang dari suatu element |
| 3 | background-repeat | memberi perintah pada gambar yang ada di latar belakang untuk perulangan. |
| 4 | background-position | mengatur posisi gambar pada latar belakang |
| 5 | background-attachment | mengatur suatu gambar apakah jika mouse di scroll gambar ikut scroll atau tetap |
| 6 | background-size | menentukan ukuran gambar pada latar belakang |
| 7 | background | mengatur latar belakang pada element secara luas |
All Background Properties lebih sering digunakan untuk mengatur elemen-elemen yang ada pada html. berikut ulasan satu persatu dari ke-7 properti background.
2. Background-Color
Sesuai dengan namanya, Properti background-color pada CSS merupakan properti yang bisa Anda gunakan khusus untuk mengatur pewarnaaan dari suatu latar belakang pada selector(elemen html). Properti ini mempunyai beberapa nilai antara lain.
| No | Jenis Nilai | Nilai |
|---|---|---|
| 1 | Color | red, blue, black, olive, teal, navy, lime, dsb |
| 2 | Hexadecimal | #FF0000, #00FF00, #0000FF, #000000, dsb |
| 3 | red-green-blue 'rgb()' | rgba(255,0,0), rgba(0%,50%,100%), rgba(0,0,255), dsb |
| 4 | red-green-blue-alpha 'rgba()' | rgba(255,0,0,1), rgba(0%,100%,50%,1), rgba(0,0,255,0.5), dsb |
| 5 | Hue-saturation-lightness 'hsl()' | hsl(360,100%,50%), hsl(240,75%,50%), dsb |
| 6 | Hue-saturation-lightness-alpha 'hsla()' | hsla(360,100%,50%,0.1), dsb |
Setelah Anda mengetahui beberapa value dasar untuk properti background-color. Selanjutnya, berikut contoh penggunaan dari properti tersebut atau copy kode HTML+CSS berikut ini :
<!DOCTYPE html>
<html>
<head>
<title> Contoh Penggunaan Properti Background-Color </title>
<style>
header{
background-color: red;
}
main{
background-color: rgba(0,255,0,1);
}
footer{
background-color: #0000FF;
}
</style>
</head>
<body>
<header> Background dengan Warna Merah </header>
<main> Background dengan Warna RGBA(Hijau) </main>
<footer> Background dengan Warna HEX(Biru) </footer>
</body>
</html>Jika Berhasil dengan Kode HTML+CSS diatas, berikut screenshot dari hasil kode diatas jika ditampilkan pada Halaman Web Offline :
3. Background-Image
Property CSS ini merupakan properties yang bisa Anda gunakan untuk mengatur dan menentukan sebuah gambar yang akan dgunakan sebagai background dari suatu elemen atau selector.
Penggunaan properti background-image dimaksudkan untuk menampilkan sebuah gambar pada halaman web. Adapun Value atau nilai dari properti tersebut yaitu sebuah url yang menunjukkan lokasi file gambar disimpan.
Untuk melakukan pengujian dengan properti background-image pada CSS, sebelumnya Anda siapkan dulu 2 buah file. File Pertama adalah Gambar yang akan digunakan sebagai background pada Halaman Web. File Kedua adalah File Html yang berisikan kode Html dan Kode CSS, berikut isi dari File Html Tersebut :
<!DOCTYPE html>
<html>
<head>
<title> Contoh Penggunaan Properti Background-Image </title>
<style>
body{
background-image: url('php.png');
}
</style>
</head>
<body>
<!-- Gambar Akan muncul pada Elemen Body -->
</body>
</html>Setelah Anda Mempersiapkan Gambar dan menulis ulang atau copy kode diatas kemudian simpan dengan nama 'index.html'. klik double, pada file 'index.html' atau buka pada web browser, jika berhasil akan seperti berikut :
Jika diperhatikan dengan teliti dari Hasil diatas, sebenarnya penggunaan dari background-image mempunyai kelemahan, jika kita mempunyai gambar dengan ukuran kecil, maka secara default penggunaan dari background-image akan melakukan looping/perulangan pada halaman web secara horizontal dan vertical.
Bisa dilihat dari hasil diatas, halaman web menampilkan gambar lebih dari satu, padahal gambar yang disiapkan hanya satu saja. untuk itulah CSS mempersiapkan properti lain yang berguna membuat looping gambar tidak terjadi. untuk properti tersebut yaitu properti 'background-repeat'.
4. Background-Repeat
Properti background-repeat merupakan properti pelengkap dari properti background-image. Sedangkan fungsi berguna untuk mengatur perulangan dari sebuah gambar. Perulangan tersebut apakah akan diulang secara horizontal, vertical atau tidak diulang. berikut ini value atau nilai dari background-repeat :
| No | Value | Deskripsi |
|---|---|---|
| 1 | repeat | membuat gambar pada background melakukan perulangan secara horizontal dan vertical |
| 2 | repeat-x | membuat gambar pada background melakukan perulangan secara horizontal |
| 3 | repeat-z | membuat gambar pada background melakukan perulangan secara vertical |
| 4 | no-repeat | membuat gambar pada background hanya satu atau tidak melakukan perulangan |
Setelah Anda mengetahui beberapa value dasar untuk properti background-repeat. Selanjutnya untuk penggunaan background-repeat, bisa dikatakan akan berfungsi jika bersamaan dengan properti background-image. Berikut contoh kodenya :
<!DOCTYPE html>
<html>
<head>
<title> Contoh Penggunaan Properti Background-Repeat </title>
<style>
body{
background-image: url('php.png');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<!-- Gambar Akan muncul pada Elemen Body Tanpa Looping -->
</body>
</html>Berikut Screenshot dari contoh kode diatas jika ditampilkan pada halaman web :
5. Background-Position
Backgroud-position merupakan properti yang mengatur dan mengarahkan posisi gambar dari penggunaan background-image, bisa dikatakan properti background-position sebagai pelengkap dari properti background-image.
Fungsi dari background-position lebih mirip dengan fungsi dari properti text-align pada css. Perbedaannya, text-align berfungsi mengatur posisi dari semua elemen, sedangkan background-position digunakan bersamaan dengan properti background-image. berikut ini beberapa valuenya :
| No | Value | Value |
|---|---|---|
| 1 | left top | right top |
| 2 | left center | right center |
| 3 | left bottom | right bottom |
| 4 | center top | 50% 50% |
| 5 | center center | 50px 50px |
| 6 | center bottom | initial |
Untuk value atau nilai yang dalam bentuk ukuran seperti px dan %, Anda bisa menyesuaikan sendiri sesuai yang diinginkan. misalnya "background-position: 25% 75%;", dimana ukuran 25% untuk posisi Vertical dan 75% untuk posisi horizontal. contoh kode :
<!DOCTYPE html>
<html>
<head>
<title> Contoh Penggunaan Properti Background-Position </title>
<style>
body{
background-image: url('php.png');
background-repeat: no-repeat;
background-position: right top;
}
</style>
</head>
<body>
<!-- Gambar Akan muncul pada Elemen Body -->
</body>
</html>Berikut Screenshot dari contoh kode diatas jika ditampilkan pada halaman web :
6. Background-Attachment
background-attachment merupakan properti yang digunakan bersamaan dengan background-image. dimana fungsi dari properti tersebut untuk mengatur suatu gambar apakah jika mouse di scroll gambar ikut scroll atau tetap.
background-attachment lebih sering digunakan untuk membuat gambar pada latar belakanag fixed atau diam ketika mouse di scroll. berikut ini beberapa value atau nilai dari background-attachment :
| No | Value | Deskripsi |
|---|---|---|
| 1 | scroll | gambar background akan bergulir jika mouse dicroll |
| 2 | fixed | gambar background akan diam/tidak bergulir jika mouse di scroll |
| 3 | local | gambar background akan bergulir dengan isi dari element atau content |
| 4 | initial | mengatur properti ke nilai standarnya/default. |
dari beberapa value untuk background-attachment diatas, berikut ini contoh kode, penggunaan background-attachment dengan value fixed. Anda juga bisa mencobanya sendiri dengan mengganti value dari properti tersebut.
<!DOCTYPE html>
<html>
<head>
<title> Contoh Penggunaan Properti Background-Attachment </title>
<style>
body{
background-image: url('php.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
</style>
</head>
<body>
<!-- Gambar Akan muncul pada Elemen Body -->
</body>
</html>Berikut Screenshot dari contoh kode diatas jika ditampilkan pada halaman web :
7. Background-Size
background-size merupakan properti pelengkap dari properti background-image. properti tersebut berguna untuk mengatur ukuran gambar background sesuai yang diinginkan. berikut value dari properti background-size :
| No | Value | Deskripsi |
|---|---|---|
| 1 | px, em, mm, cm, dll | Mengatur lebar dan tinggi dari gambar background dengan ukuran. misal 10px 5px, 10px untuk lebar dan 5px untuk tinggi. |
| 2 | % | Mengatur lebar dan tinggi dari gambar background dalam ukuran persen. misal 50% 25%, 50% untuk lebar dan 25% untuk tinggi. |
| 3 | auto | gambar background akan ditampilkan secara asli(ukuran asli dari gambar) |
| 4 | contain | resize image, merubah ukuran gambar dan memastikan gambar terlihat sepenuhnya |
| 5 | cover | membuat gambar background fullscreen. |
| 6 | initial | setel value ke default. |
dari beberapa value diatas, Anda bisa mengatur sebuah gambar menjadi fullscreen dengan value cover. berikut ini contoh kode untuk properti background-size :
<!DOCTYPE html>
<html>
<head>
<title> Contoh Penggunaan Properti Background-Size </title>
<style>
body{
background-image: url('php.png');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: auto 100%;
}
</style>
</head>
<body>
<!-- Gambar Akan muncul pada Elemen Body -->
</body>
</html>Berikut Screenshot dari contoh kode diatas jika ditampilkan pada halaman web :
8. Background
Properti Background merupakan properti yang digunakan untuk mempersingkat penulisan property CSS. artinya, Anda tidak perlu menulis properti background-color, background-image, background-repeat maupun background-posisition secara bersamaan. Anda hanya cukup menggunakan properti background saja.
Value dari properti background berisi value dari properti lain, seperti value dari background-color, background-image, background-repeat, atau background-posisition. berikut aturan menulis kodenya :
selector { background: white url('php.png') no-repeat left top; }