Kalau sebelumnya kita menggunakan atribut background dan bgcolor dalam pelajaran HTML tentang Background HTML, sekarang kita akan belajar membuat latar belakang atau background tersebut dengan menggunakan atribut style.
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>
Hasil: lihat Preview
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
Klik link berikut untuk melihat kode
hexadecimal dan nama
warna, untuk RGB dapat menggunakan tool kode warna RGB.
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>
Hasil: lihat Preview
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.
Hasil: Lihat Preview
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>
Hasil: lihat Preview
Sedangkan untuk pengulangan secara
vertikal kita tambahkan kode repeat-y:
<body
style="background-image:url(background.jpg);background-repeat:repeat-y;">...<body>
Hasil: lihat Preview
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;">
Hasil: lihat Preview
0 komentar:
Posting Komentar