Beberapa Cara Menambahkan Background di HTML

Sigit N
HTML (HyperText Markup Language)
Beberapa Cara Menambahkan Background di HTML
Konten Halaman

Okay di tutorial kali ini mari kita belajar html untuk mengganti background atau latar belakang, Ada beberapa cara mengganti background di HTML dengan mudah bisa lewat atribut elemen di tag HTML atau dengan CSS menggunakan properti background-color atau background-image, berikut ini caranya:

Mengganti background menggunakan atribut di HTML

Dengan cara ini kita bisa mengganti background di HTML tanpa CSS, tetapi kekurangannya dengan atribut bgcolor kita hanya bisa menggunakan untuk keperluan mengganti dan menambah kan background dengan warna saja tidak bisa untuk gambar dan hanya tag body, marquee, table, tbody, td, tboot, th, thead, tr, col dan group.

Menggunakan atribut bgcolor

berikut ini contoh kode HTML dengan dengan atribut bgcolor yang posisinya berada di table :

nama usia jenis kelamin
sugeng 22 pria
siti 19 wanita
wulan 25 wanita 
<!DOCTYPE html>
<html>
  <head>
    <title>mengganti background di atribut html bgcolor</title>
  </head>
  <body>
    <table border="1" bgcolor="grey">
      <tr>
        <th>nama</th>
        <th>usia</th>
        <th>jenis kelamin</th>
      </tr>
      <tr>
        <td>sugeng</td>
        <td>22</td>
        <td>pria</td>
      </tr>
      <tr>
        <td>siti</td>
        <td>19</td>
        <td>wanita</td>
      </tr>
      <tr>
        <td>wulan</td>
        <td>25</td>
        <td>wanita</td>
      </tr>
    </table>
  </body>
</html>

Menggunakan atribut background

berikut ini contoh kode HTML dengan dengan atribut background yang berada di dalam tag body :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body background="html-background-image-example.jpg">
    <h1>
      ini adalah bagian dari teks untuk mengganti image dengan properti
      background
    </h1>
  </body>
</html>

Hasil : html-background-image-example.jpg

Mengganti background menggunakan CSS di HTML

Menggunakan properti background-color

bagian CSS:

<style>
  p {
    background-color: yellow;
  }
</style>

lngkap dengan CSS dan HTML :

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h2>Mengganti background html dengan nama warna atau kode rgb di css</h2>

    <p>
      ini adalah contoh untuk mengganti background color <br />
      menggunakan css, dengan mengganti ini <br />
      kalian bisa merubah dengan warna apapun <br />
      jangan sampai salah menggunakannya<br />
      karena warna tidak bisa sesuai <br />
      dengan yang disediakan atau kode warna rgb salah <br />
    </p>
  </body>
</html>

Hasil :

html-background-color-example-01.png

Penjelasan :

  • yang melakukan perubahan background css adalah properti background-color: yellow; patikan nama warna dalam penulisan bahasa inggris benar atau menggunakan rgb kode yang terdapat kalian bisa gunakan color picker di google

Menggunakan property background-image bagian CSS: menggunakan

background-image contohnya :

<style>
  p {
    background-image: url('html-background-image-example.jpg');
  }
</style>

lngkap dengan CSS dan HTML :

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        background-image: url('html-background-image-example.jpg');
      }
    </style>
  </head>
  <body>
    <h2>Mengganti background html dengan image di css</h2>

    <p>
      ini adalah contoh untuk mengganti background image <br />
      menggunakan css, dengan menti ini <br />
      kalian bisa merubah dengan gambar apapun <br />
      di internet atau di local storage teman teman <br />
      jangan sampai salah menggunakannya<br />
      karena gambar tidak bisa terbuka <br />
      ini hanyalah contoh penggunakan background properti jika ada dan lokasi
      sudah benar
    </p>
  </body>
</html>

Hasil : html-background-image-example-02.png

Penjelasan :

  • background-image bagian properti ini di css bertugas sebagai perintah mengganti background, posisi properti ini di masukan di dalam tag <p>.
  • di property background-image terdapat value url('alamat url image kamu') url pastikan url diisi dengan benar supaya gambar muncul, bisa langsung dari domain path seperti url('https://pemburukode.com/logo.png') atau istilahnya melakukan hotlink ke url lain di luar domain.