Untuk membuat background dengan warna dalam CSS di gunakan properti background-color.
Membuat background di halaman website dengan warna:
Contoh background di dalam tag HTML:
<p style="background-color:aqua">Paragraf dengan background aqua</p>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 alat untuk mengetahui kode warna hexadesimal dan rgb.
Untuk membuat background website satu halaman penuh
<body style="background-color:yellow">...</body>Contoh penulisannya dalam dokumen HTML:
<html>
<head></head>
<body style="background-color:yellow">
<h1>Contoh membuat background warna dengan atribut style background-color.</h1>
</body></html>Klik untuk melihat previewnya
Selanjutnya membuat latar belakang dengan grafik atau gambar.
Untuk membuat background dengan gambar dalam CSS 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 bawah (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>Klik untuk melihat previewnya
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 1px x 2px, hanya 2 titik (pixel) yaitu putih dan abu-abu kita dapat membuat background seperti berikut.
Klik untuk melihat previewnya
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>Klik untuk melihat previewnya
Sedangkan untuk pengulangan secara vertikal kita tambahkan kode repeat-y:
<body style="background-image:url(background.jpg);background-repeat:repeat-y;">...<body>Klik untuk melihat previewnya
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;">Klik untuk melihat previewnya
Demikianlah pembahsan tentang background HTML, artikel lain yang terkait cara membuat background transparan dengan css dan gambar.
No comments:
Post a Comment