Cascading Style Sheets (CSS) merupakan satu struktur yang digunakan untuk persembahan (rupa dan format) dokumen yang ditulis dalam bahasa markup (HTML). Tutorial kali ini melibatkan tag CSS3 yang mampu memberi kawalan sepenuhnya terhadap latar belakang (background) laman web. Kod CSS3 untuk kawalan background ini sangat berguna untuk mengawal paparan laman web yang sama walaupun dibuka dalam resolusi yang berbeza.
Rajah 1: Paparan menerusi skrin resolusi 1600x900
Sebagai contoh, laman web ini direka untuk paparan resolusi 1600x900 pixel seperti dalam paparan Rajah 1 dia atas. Jadi apabila laman ini dipaparkan dalam komputer yang mempunyai resolusi yang lebih rendah, latar belakang laman ini akan berubah dan menyebabkan kecacatan pada paparan laman.Sebagai contoh, saya sertakan "print screen" daripada paparan standard laptop widescreen (1280x800) yang agak kecil sedikit berbanding resolusi skrin diatas dan kesan latar belakang jelas kelihatan tidak wujud kerana perubahan resolusi. Lihat Rajah 2 dibawah dimana posisi latar belakang laman telah lari dari kedudukan asal.
Rajah 2: Paparan menerusi skrin resolusi 1280x800 (Sebelum)
Sebelum ini, kod yang digunakan adalah seperti berikut:
body
{
background: #FFFFFF url(../images/personal/latar.jpg) no-repeat fixed;
color: #333;
font-family: arial, helvetica, sans-serif;
}
Kod diatas merupakan kod CSS dan masih mempunyai kelemahan untuk kegunaan sekiranya berlaku perubahan resolusi skrin. Jadi untuk memastikan latar belakang web tidak lari dan konsisten untuk setiap resolusi, saya telah menambah sedikit kod CSS3 dalam tag CSS body tersebut. Kod CSS3 tersebut adalah seperti berikut:
body
{
background: #FFFFFF url(../images/personal/latar.jpg) no-repeat fixed;
color: #333;
font-family: arial, helvetica, sans-serif;
webkit-background-size: cover;
moz-background-size: cover;
o-background-size: cover;
background-size: cover;
}
penambahan elemen CSS3 membantu untuk laman web mengubah latar laman mengikut kesesuaian resolusi paparan. Berikut adalah paparan laman web dalam resolusi yang sama seperti diatas 1280x800 selepas dimasukkan kod CSS3. Ianya memberi kesan yang sempurna terhadap beberapa resolusi skrin.
Rajah 3: Paparan menerusi skrin resolusi 1280x800 (Selepas)
Selamat mencuba!
Semua hasil penulisan dalam web blog ini adalah hak cipta asyraf.org dan sebarang pertanyaan boleh dibuat melalui menu hubungi. asyraf.org tidak bertanggungjawab terhadap sebarang kerosakkan yang berlaku semasa mengikuti tutorial.