HTML Background

Background pada elemen HTML

Background atau latar belakang pada elemen HTML merupakan salah satu cara pilihan dalam mempercantik tampilan halaman web.
Background dalam HTML bukan merupakan elemen melainkan property dari elemen HTML.
Background sendiri memiliki property turunan yang melengkapi penggunaannya pada suatu elemen. Berikut ini property turunan dari background :

1. background-color = nama warna / HEX / RGB.

Berfungsi untuk menetapkan / mengatur latar belakang dengan warna.
Lihat tabel warna HTML (color/HEX/RGB).

Contoh kode :

<p style='background-color: coral;'>Teks paragraf</p>

Hasil :

Teks paragraf

2. background-image = URL sumber file gambar.

Berfungsi untuk menetapkan / mengatur latar belakang dengan gambar.

Contoh kode :

<p style='background-image:url(https://i.postimg.cc/DZJgPKv7/pohon.gif);'>Teks paragraf</p>

Hasil :

Teks paragraf

3. background-position  =  
   value

   • left top
   • left center
   • left bottom
   • right top
   • right center
   • right bottom
   • center top
   • center center
   • center bottom
Untuk mengatur posisi latar belakang gambar.

Lihat contoh penggunaan Properti background-position.

4. background-size  = 
   value

   • auto
   • contain
   • cover
   • %
   • panjang
Untuk mengatur dimensi latar belakang gambar.

Lihat contoh penggunaan Properti background-size

5. background-repeat = 
   Value

   • left top
   • left center
   • repeat
   • repeat-x
   • repeat-y
   • no-repeat
   • space
   • round
Untuk mengatur pengulangan pada latar belakang gambar.

Lihat contoh penggunaan Properti background-repeat.

6. background-origin  = 
   content-box

   • padding-box
   • border-box
   • initial
   • inherit
Untuk menentukan posisi asal pada latar belakang gambar.
7. background-clip  = 
   content-box

   • padding-box
   • border-box
   • initial
   • inherit
Untuk menentukan perluasan latar belakang terhadap elemen.
Lihat penjelasan value Properti background clip & origin
8. background-attachment  = 
   value

   • scroll
   • fixed
   • local
   • initial
   • inherit
Untuk mengatur penyematan latar belakang gambar terhadap scroll halaman.