Tampilan website page menjadi daya tarik tersendiri untuk dikunjungi. Memang, bagaimana tamu blog atau website sampai berkunjung ke suatu situs kemungkinan paling besar adalah dengan mengetik kata-kata kunci (keywords) di browser. Kemudian mesin pencari akan menampilkan halaman-halaman hasil pencariannya yang di dalamnya termaktub satu (atau lebih) URL yang mengarah ke website tersebut. Maka ketika menemukan situs yang dicari kesan tampilan website memiliki porsi penilaian tersendiri.
Karena itu, sumber pengunjung lain dari website tersebut adalah mereka yang terkesan dengan tampilan webpage – sebagai kunjungan ulang. Meskipun kebanyakan kunjungan ulang lebih dipengaruhi oleh isi content. Salah satu unsur pembentuk tampilan halaman web yang mengesankan adalah Background.
CSS Property Background Website
Background website page bisa berupa latar belakang berwarna, atau blank (kosong atau putih), image tunggal berupa photo besar atau Background Repeat dengan pola (pattern) atau image berulang seperti gambar di atas. Pengulangan tampilan ini terbagi dalam beberapa variasi : Repeat secara horizontal dan vertikal, Repeat secara vertikal, Repeat secara horizontal atau No Repeat.
Background Repeat vertikal-datar pada halaman website
Background ini berupa tampilan latar belakang webpage dengan pola berulang yang memenuhi seluruh halaman webpage. Atau dengan kata lain pola perulangan secara vertikal dan horizontal sekaligus seperti ilustrasi gambar berikut :
CSS Code:
div
{
background-image:url('smiley.gif');
background-repeat:repeat;
}
div
{
background-image:url('smiley.gif');
background-repeat:repeat;
}
Gambar yang menjadi objek perulangan bisa berupa sebuah file gambar (misalnya, “smiley.gif” seperti contoh di atas) atau alamat URL yang berisi gambar yang bersangkutan.
background halaman website : Repeat X (horizontal)
Background ini berupa tampilan latar belakang webpage dengan pola berulang secara horizontal (mendatar) seperti ilustrasi gambar berikut :
CSS Code:
div div
{
background-image:url('smiley.gif');
background-repeat:repeat-x;
}
div div
{
background-image:url('smiley.gif');
background-repeat:repeat-x;
}
background halaman website : Repeat Y
Background ini berupa tampilan latar belakang webpage dengan pola berulang secara vertikal (tegak lurus) seperti ilustrasi gambar berikut :
CSS Code:
div div
{
background-image:url('smiley.gif');
background-repeat:repeat-y;
}
div div
{
background-image:url('smiley.gif');
background-repeat:repeat-y;
}
Latar belakang halaman website : No Repeat
Background ini berupa tampilan latar belakang webpage hanya berupa satu objek gambar saja dan tanpa ada perulangan sama sekali seperti ilustrasi gambar berikut :
CSS Code:
div div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
}
div div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
}
Pola background halaman website
CSS Property untuk teknik pengkayaan background diatas dapat diterapkan untuk background pada header, footer, kolom kanan dan kolom kiri atau kolom tengah sembarang website. Berikut beberapa tekstur atau pola untuk dicoba :
1.
http://static1.grsites.com/archive/textures/wood/wood029.gif
2.
http://static4.grsites.com/archive/textures/wood/wood021.jpg
3.
http://static2.grsites.com/archive/textures/wood/wood014.jpg
4.
1.
http://static1.grsites.com/archive/textures/wood/wood029.gif 2.
http://static4.grsites.com/archive/textures/wood/wood021.jpg 3.
http://static2.grsites.com/archive/textures/wood/wood014.jpg 4.
http://webdesignledger.com/wp-content/uploads/2010/01/seamless_patterns_9.jpg
.
.
.
.
.
.
.
.
![[Valid Atom 1.0]](https://lh3.googleusercontent.com/-AHjNV40KrDw/UextTozh8GI/AAAAAAAAMjU/UG7zSHdmatc/w88-h31-no/valid-atom.jpg "Validate my Atom 1.0 feed")
