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.
Background Color (Warna Latar Belakang)
Anda dapat mengatur warna latar belakang dari setiap elemen HTML menggunakan properti background-color. Anda dapat memilih warna latar belakang dengan kode warna HTML.
Tips: Pilih warna background dengan kode warna HTML.
Properti background-color pada CSS adalah untuk pengaturan warna latar belakang dari elemen.
Background Image (Gambar Latar Belakang)
Anda dapat mengatur gambar latar belakang menggunakan properti background-image.
Menggunakan kode di bawah ini, Anda perlu mengubah /logo.png ke lokasi gambar latar belakang Anda.
Properti background-image pada CSS adalah untuk pengaturan gambar latar belakang dari suatu elemen.
Background Untuk Halaman Utuh
Untuk mengatur properti latar belakang (background) untuk seluruh halaman, dapat menerapkan properti untuk elemen body.
Contohnya seperti ini
Background Color (Warna Latar Belakang)
Anda dapat mengatur warna latar belakang dari setiap elemen HTML menggunakan properti background-color. Anda dapat memilih warna latar belakang dengan kode warna HTML.
Kode | Hasil |
---|---|
Kode latar belakang HTML terbatas, latar belakang kode CSS jauh lebih baik! |
Properti background-color pada CSS adalah untuk pengaturan warna latar belakang dari elemen.
Sintaks: | background-color: <value> |
Kemungkinan Nilai: |
|
Initial Value: | Transparent |
Berlaku untuk: | Semua elemen |
Inherited: | No |
Media: | Visual |
Contoh | background-color:#FFE99D |
Kode dan Hasilnya | <style type="text/css"> Hasilnya Baik dengan HTML maupun CSS Cara Membuat Background di suatu website atau blog |
Background Image (Gambar Latar Belakang)
Anda dapat mengatur gambar latar belakang menggunakan properti background-image.
Menggunakan kode di bawah ini, Anda perlu mengubah /logo.png ke lokasi gambar latar belakang Anda.
Kode | Hasil |
---|---|
<div style=�background-image:url(/logo.png); background-repeat:repeat; width:200px; height:200px;�> <p>Kode latar belakang HTML terbatas, latar belakang kode CSS jauh lebih baik!</p> </div> | Kode latar belakang HTML terbatas, latar belakang kode CSS jauh lebih baik! |
Syntax: | background-image: <value> |
Nilai: |
|
Initial Value: | None |
Berlaku untuk: | Semua elemen |
Inherited: | No |
Media: | Visual |
Contoh | background-image:url(/smile.gif) |
Kode <style type="text/css"> | Hasilnya Hasilnya. Ini merupakan contoh penggunaan background-image |
Background Untuk Halaman Utuh
Untuk mengatur properti latar belakang (background) untuk seluruh halaman, dapat menerapkan properti untuk elemen body.
Contohnya seperti ini
<html>Tetapi jika menggunakan CSS, contoh kodenya seperti berikut.
<head>
<title>Judul</title>
</head>
<body style="background-color:black;">
Isi halaman
</body></html>
<html>Maka suatu halaman yang menggunakan salah satu kode di atas baik yang menggunakan metode HTML maupun CSS akan memiliki warna latar belakang hitam.
<head>
<title>Judul</title>
<style type="text/css">
body { background-color:black; }
</style>
</head>
<body>
Isi halaman
</body></html>
0 komentar
Posting Komentar