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>
gak bisa nih bang .. pusing ><
BalasHapusGk bisanya di mana?
Hapusgak bisa nih udah masukin sama kayak gitu trus sama url gambarnya, tapi tetep putih bg nya, itu kenapa ya??:/
Hapuscoba satu folderkan file html sama gambarnya. Misal di folder web ada file index.html dan file gambar backgroundku.jpg.
Hapusmaka css-nya
background-image:url(backgroundku.jpg);
Kalau format gambarnya gk kelihatan ketika dibuka di windows/file explorer, bisa klik kanan lalu klik properties.
kalo nge-pas-kan gambar background itu biar fit 1 window gmana bang?
Hapuspunya ane gambar nya jadi pecah2.. terbagi2
Maaf kurang tau gan, biasanya klo gitu pake gambarnya yg besar. Atau klo gk mau jadi banyak ditambahin no-repeat di kodenya.
Hapusmungkin kodenya seperti ini
background-image:url(URLGAMBAR) no-repeat;
thanx mas bro.. ane berhasil.. :-)
BalasHapusgood :)
BalasHapus