Untuk membuat background dengan warna di gunakan properti background-color.
Membuat background di halaman website dengan warna:
<body style="background-color:yellow">...</body>
Contoh di dalam dokumen HTML:
<html>
<head></head> <body style="background-color:yellow">
<h1>Contoh membuat background warna dengan atribut style background-color.</h1> </body></html>
Contoh background di dalam tag HTML:
<p style="background-color:aqua">Paragraf dengan background aqua</p>
Hasil:
Paragraf dengan background aqua
Untuk nilai dari properti background-color tersebut kita bisa menggunakan kode RGB, Hexadecimal maupun Nama Warna.
<p style="background-color:rgb(127,255,212)">Warna background menggunakan kode RGB</p> <p style="background-color:#7fffd4">Warna background menggunakan kode Hexadecimal</p> <p style="background-color:aquamarine">Warna background menggunakan Nama Warna</p>
Hasil dari ketiga kode HTML diatas akan sama:
Warna background menggunakan kode RGB
Warna background menggunakan kode Hexadecimal
Warna background menggunakan Nama Warna
Untuk membuat background dengan gambar di gunakan properti background-image.
Membuat background dengan gambar di dokumen HTML:
<body style="background-image:url(lokasi dan nama gambar)">...</body>
Sebagai contoh kita akan menggunakan gambar di samping (background.jpg) untuk membuat background di dokumen HTML, ukuran gambar tersebut adalah 100px X 100px :
<html>
<head></head> <body style="background-image:url(background.jpg)">
<h1>Contoh membuat background gambar dengan atribut style background-image.</h1> </body></html>
Maka secara otomatis browser akan mengisi penuh halaman website dengan gambar tersebut secara berulang (repeat) baik secara vertikal maupun horizontal.
Dengan adanya pengulangan ini maka dengan gambar ukuran 1 x 2px, hanya 2 titik (pixel) yaitu putih dan abu-abu kita dapat membuat background seperti berikut.
Untuk pengaturan pengulangan tersebut dapat menggunakan properti background-repeat dengan nilai atau value: no-repeat, repeat, repeat-x dan repeat-y.
Contoh jika kita ingin membuat pengulangan secara horizontal maka kita dapat menambah kode repeat-x ke dalam contoh diatas:
<body style="background-image:url(background.jpg);background-repeat:repeat-x;">...<body>
Sedangkan untuk pengulangan secara vertikal kita tambahkan kode repeat-y:
<body style="background-image:url(background.jpg);background-repeat:repeat-y;">...<body>
Anda bisa melakukan latihan selanjutnya dengan mengganti gambar dan nilainya.
Untuk memposisikan background digunakan properti background-position dengan value top=atas, right=kanan, bottom=bawah left=kiri dan center=tengah atau dengan nilai x dan y.
Sebagai contoh kita akan menggunakan gambar berikut yang berukuran 800px X 1px dengan nama bg-example.png.
Kita akan membuat agar gambar tersebut berada tepat ditengah dokumen dengan pengulangan (repeated) secara vertikal.
<body style="background-color:#000;background-image:url(bg-example.png);background-repeat:repeat-y;background-position:center;">