TOP NEWS

A friend once said, "You can't get so hung up on where you'd rather be that you forget to make the most of where you are." We got lost along the way. But we found each other. And we made a life. A beautiful life. Together.

Wednesday, August 28, 2013

Tutorial Html - Background



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:




Contoh background di dalam tag HTML:




Untuk nilai dari properti background-color tersebut kita bisa menggunakan kode RGB, Hexadecimal maupun 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:



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:



Sedangkan untuk pengulangan secara vertikal kita tambahkan kode repeat-y:

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.



0 komentar: