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"> .subscr {border:1px dashed #FF0000; background-color:#FFE99D; padding:5px 15px;} .subscr-right {border-left:1px dashed #FF0000; width:160px; padding-left:20px; margin-left:20px; float:right;} </style> <div class="subscr"> <div class="subscr-right"> <p>Baik dengan HTML maupun CSS</p> </div> <div> <p>Cara Membuat Background di suatu website atau blog</p> </div> </div> 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"> .selector { background-image:url(/smile.gif); background-repeat: repeat; width: 200px; height: 200px; } </style> <div class="selector">Hasilnya. Ini merupakan contoh penggunaan background-image </div> | 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> <head> <title>Judul</title> </head> <body style="background-color: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.