HTML - Latar Belakang

Secara default, latar belakang halaman web Anda berwarna putih. Anda mungkin tidak menyukainya, tapi jangan khawatir. HTML memberi Anda dua cara berikut untuk menghias latar belakang halaman web Anda.

Latar Belakang HTML dengan Warna
Latar Belakang HTML dengan Gambar

Sekarang mari kita lihat kedua pendekatan tersebut satu per satu menggunakan contoh yang sesuai.

Latar Belakang Html dengan Warna

Itu bgcolor atribut digunakan untuk mengontrol latar belakang elemen HTML, khususnya badan halaman dan latar belakang tabel.

Note- Atribut bgcolor tidak digunakan lagi di HTML5. Jangan gunakan atribut ini.

Berikut adalah sintaks untuk menggunakan atribut bgcolor dengan tag HTML apa pun.

<tagname bgcolor = "color_value"...>

Nilai_warna ini dapat diberikan dalam salah satu format berikut -

<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
 
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
 
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >

Contoh

Berikut adalah contoh untuk mengatur latar belakang tag HTML -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Colors</title>
   </head>
	
   <body>
      <!-- Format 1 - Use color name -->
      <table bgcolor = "yellow" width = "100%">
         <tr>
            <td>
               This background is yellow
            </td>
         </tr>
      </table>
 
      <!-- Format 2 - Use hex value -->
      <table bgcolor = "#6666FF" width = "100%">
         <tr>
            <td>
               This background is sky blue
            </td>
         </tr>
      </table>
 
      <!-- Format 3 - Use color value in RGB terms -->
      <table bgcolor = "rgb(255,0,255)" width = "100%">
         <tr>
            <td>
               This background is green
            </td>
         </tr>
      </table>
   </body>
   
</html>

Ini akan menghasilkan hasil sebagai berikut -

Latar Belakang Html dengan Gambar

Itu backgroundAtribut juga dapat digunakan untuk mengontrol latar belakang elemen HTML, khususnya badan halaman dan latar belakang tabel. Anda dapat menentukan gambar untuk mengatur latar belakang halaman atau tabel HTML Anda.

Note- Atribut latar belakang tidak digunakan lagi di HTML5. Jangan gunakan atribut ini.

Berikut adalah sintaks untuk menggunakan atribut background dengan tag HTML apa pun.

Note- Atribut latar belakang tidak digunakan lagi dan disarankan untuk menggunakan Lembar Gaya untuk pengaturan latar belakang.

<tagname background = "Image URL"...>

Format gambar yang paling sering digunakan adalah gambar JPEG, GIF dan PNG.

Contoh

Berikut adalah contoh untuk mengatur gambar latar belakang sebuah tabel.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set table background -->
      <table background = "/images/html.gif" width = "100%" height = "100">
         <tr><td>
            This background is filled up with HTML image.
         </td></tr>
      </table>
   </body>
   
</html>

Ini akan menghasilkan hasil sebagai berikut -

Latar Belakang Berpola & Transparan

Anda mungkin pernah melihat banyak pola atau background transparan di berbagai website. Ini secara sederhana dapat dicapai dengan menggunakan gambar berpola atau gambar transparan di latar belakang.

Disarankan bahwa saat membuat pola atau gambar GIF atau PNG transparan, gunakan dimensi sekecil mungkin bahkan sekecil 1x1 untuk menghindari pemuatan yang lambat.

Contoh

Berikut adalah contoh untuk mengatur pola latar belakang tabel -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set a table background using pattern -->
      <table background = "/images/pattern1.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>

      <!-- Another example on table background using pattern -->
      <table background = "/images/pattern2.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>
   </body>
   
</html>

Ini akan menghasilkan hasil sebagai berikut -