Cara Membuat Background HTML

Yosefa Ferdianto Selasa, 08 Januari 2013
Artikel ini menyediakan tentang kode background HTML dan kode untuk pengaturan properti background (latar belakang) dari elemen HTML.

Contoh berikut menggunakan Cascading Style Sheets (CSS). CSS merupakan cara yang terbaik untuk menetapkan sifat latar belakang dalam HTML Anda. Ini lebih fleksibel daripada metode HTML yang usang. Menggunakan CSS, Anda dapat mengatur properti latar belakang dari setiap elemen HTML. Ditambah Anda dapat melakukan hal-hal seperti menentukan posisi gambar, apakah harus mengulang, bagaimana harus mengulangi dll.

Anda dapat mengatur warna latar belakang dari setiap elemen HTML menggunakan properti background-color. Anda dapat memilih warna latar belakang dengan kode warna HTML.

Cara Membuat Background HTML
Untuk mengatur properti latar belakang (background) untuk seluruh halaman, dapat menerapkan properti untuk elemen body.
Contohnya seperti ini
<html>
<head>
<title>Judul</title>
</head>
<body bgcolor="black">
Isi halaman
</body>
</html>

Tetapi jika menggunakan CSS, contoh kodenya seperti berikut.
<html>
<head>
<title>Judul</title>
<style type="text/css">
body { background-color:black; }
</style>
</head>
<body>
Isi halaman
</body>
</html>

Maka suatu halaman yang menggunakan salah satu kode di atas baik yang menggunakan metode HTML maupun CSS akan memiliki warna latar belakang hitam.

Membuat Background Gambar
Kodenya seperti berikut
<html>
<head>
<title>Judul</title>
<style type="text/css">
body {
background-color:black;
background-image:url(URLGAMBAR); 
}
</style>
</head>
<body>
Isi halaman
</body>
</html>

8 komentar:

  1. gak bisa nih bang .. pusing ><

    BalasHapus
    Balasan
    1. gak bisa nih udah masukin sama kayak gitu trus sama url gambarnya, tapi tetep putih bg nya, itu kenapa ya??:/

      Hapus
    2. coba satu folderkan file html sama gambarnya. Misal di folder web ada file index.html dan file gambar backgroundku.jpg.
      maka css-nya
      background-image:url(backgroundku.jpg);

      Kalau format gambarnya gk kelihatan ketika dibuka di windows/file explorer, bisa klik kanan lalu klik properties.

      Hapus
    3. kalo nge-pas-kan gambar background itu biar fit 1 window gmana bang?
      punya ane gambar nya jadi pecah2.. terbagi2

      Hapus
    4. Maaf kurang tau gan, biasanya klo gitu pake gambarnya yg besar. Atau klo gk mau jadi banyak ditambahin no-repeat di kodenya.
      mungkin kodenya seperti ini
      background-image:url(URLGAMBAR) no-repeat;

      Hapus
  2. thanx mas bro.. ane berhasil.. :-)

    BalasHapus