Mungkin Anda merupakan salah satu dari beberapa
orang yang ingin membuat background web terlihat bagus dan menarik. Ada
beberapa permasalahan yang sering muncul saat kita mulai memasang background ke
dalam web. Salah satunya seperti yang akan saya bahas di sini hehe
Terkadang setelah memasang background yang
tepat untuk kita pasang di web kita, ketika meng-scroll halaman web ke bawah
tiba-tiba backgroundnya terlihat putus dan mengulang gambar background yang
kita pasang dari awal lagi. Hal ini membuat tampilan web kita menjadi aneh.
Apakah Anda pernah mengalami hal itu?
Keadaan background berulang inilah yang disebut
dengan background dinamis, karena
backgroundnya ikut bergerak mengikuti scroll dengan background yang terulang
sampai bawah..
Jika
backgroundnya tidak putus dan hanya satu gambar saja, biasanya disebut dengan background statis, karena saat scroll
digerakkan ke bawah, background tidak ikut bergerak.
Untuk lebih jelasnya, mari simak yang ini ya..
Misalnya saja, saya mencoba mengganti
background dari CSS yang telah saya download. Saya memilih templatemo_368_connect
lalu saya ganti dengan gambar yang saya inginkan.
Tampilan asli:
Gambar 1
Lalu setelah diganti backgroundnya,
hasilnya seperti ini:
Gambar 2
Pada gambar 2, background terlihat putus dan
mengulang gambar dari awal lagi. Mari simak cara mengatasinya hehe
Caranya dengan mengedit file-nya, yang
berekstensi .css. Di file CSS yang asli ini, pada bagian atas terdapat sintak:
body {
margin:
0;
padding:
0;
color:
#666;
font-family:
Tahoma, Geneva, sans-serif;
font-size:
12px;
line-height:
1.5em;
background-color:
#d6d0b8;
background-image:
url(images/templatemo_body.jpg);
background-repeat:
repeat;
background-position:
top center;
}
Untuk mengganti dengan background yang
diinginkan, ganti namanya pada background-image misalnya :
background-image:
url(images/be.jpg);
Hasilnya akan seperti tampilan Gambar 2.
Untuk membuat background tidak mengulang, kita
tinggal menambahkan sintak berikut:
background-attachment:
fixed;
Sintak lengkapnya adalah seperti ini:
body {
margin:
0;
padding:
0;
color:
#666;
font-family:
Tahoma, Geneva, sans-serif;
font-size:
12px;
line-height:
1.5em;
background-color:
#d6d0b8;
background-image:
url(images/be.jpg);
background-repeat:
repeat;
background-position:
top center;
background-attachment: fixed;
}
Dan hasilnya adalah background berlanjut, jadi tidak terlihat putus dan
mengulang gambar lagi seperti ini:
Gambar 3
Lebih terlihat
bagus jika backgroundnya seperti ini kan? Ini merupakan background statis,
backgroundnya tidak mengikuti pergerakan scroll hehe
Semoga bermanfaat ^_^
---Anisa---
