Tip Trik oleh: Y. Karel Pangau
TIP TRIK KOMPUTER
oleh: Yohanes Karel Pangau
 
Mengatur Background pada sebuah WEB
oleh: Yohanes Karel Pangau
 
Background, atau yang dikenal dengan latar belakang, merupakan salah satu komponen desain web yang cukup penting. Background terutama digunakan untuk memberikan tampilan/dekorasi visual terhadap sebuah web, yang akan meningkatkan keindahan tampilan sebuah konten. Background memiliki pengaruh yang sangat besar terhadap keseluruhan desain dari sebuah website.
HTML yang digabung dengan CSS akan memberikan kemampuan penuh untuk mengatur bagaimana penampilan latar belakang sebuah elemen, sehingga dapat dengan mudah meningkatkan keindahan visual dari elemen tersebut.

Background Color pada Tag Body
HTML   <body bgcolor=gold>
   Tip dan Trik Komputer<br>
   oleh: Y. Karel pangau<br>
   Malang
</body>

 
HTML dengan CSS   <body style="background-color:gold;">
   Tip dan Trik Komputer<br>
   oleh: Y. Karel pangau<br>
   Malang
</body>
Hasilnya adalah :

Background Color pada Tag Table
HTML   <table bgcolor=gold>
 
HTML dengan CSS   <table style="background-color:gold;" border=1>
  <tr>
    <td align=center>
      Tip dan Trik Komputer<br>
      oleh: Y. Karel Pangau<br>
      Malang
    </td>
  </tr>
</table>
Hasilnya adalah :

Background Color pada Tag Body dan Table
HTML dengan CSS (Contoh01)

<body background="lantai2.jpg">
  <table style="background-color:gold;" border=1>
    <tr>
      <td align=center>
        Tip dan Trik Komputer<br>
        oleh: Y. Karel Pangau<br>
        Malang
      </td>
    </tr>
  </table>
</body>


Hasilnya adalah :

Background Color Transparent
HTML dengan CSS (Contoh02)
Perhatikan pada Contoh01, pada baris ke 2, ubahlah menjadi

<table style="background-color:rgba(255,215,0,0.4);" border=1>
Penjelasan:
  • gold adalah nama warna,
    kode HEX-nya adalah #FFD700,
    kode desimalnya adalah rgb(255,215,0)
  • rgba(255,215,0,0.4)
    0.4 adalah tingkat trasparent-nya
Hasilnya adalah :

Background Image pada Tag Body
HTML
     <body background="LogoDempo">
HTML dengan CSS
     <body style="background-image: url('LogoDempo.jpg');">
Hasilnya adalah :

Background Image pada Tag Body (no-repeat)
HTML dengan CSS
  • <body style="background: url('LogoDempo.jpg') no-repeat;">
Hasilnya adalah :

Background Image pada Tag Body (size)
HTML dengan CSS
  • <body style="background: url('LogoDempo.jpg') no-repeat;
    background-size:contain;">
Hasilnya adalah :

Penjelasan:
Background (image) akan membesar sesuai ukuran
tampilan browser dan/atau content

Background Image pada Tag Body (attachment)
HTML dengan CSS
  • <body style="background: url('LogoDempo.jpg') no-repeat;
    background-size:cover; background-attachment: fixed;">
Hasilnya adalah :

Penjelasan:
Background (image) tidak bergerak/scroll
jika tampilan web di-scroll

Lihat juga:
CSS background Property
CSS Backgrounds
Yohanes Karel Pangau    
SMA Katolik St. Albertus Malang