18%
25%
50%
75%

Kripkorn Studios | Komuniti Drupal phpBB Malaysia

Latar belakang

Tutorial
CSS Tentang artikel ini
Penulis: kripkorn -- Oct 19, 2008
kemas kini Kemas kini: Oct 26, 2011

Membuat warna bagi latar belakang

<html>
<head>
<style type="text/css">
  body { background-color: yellow }
  h1 { background-color: #00ff00 }
  h2 { background-color: transparent }
  p { background-color: rgb(250,0,255) }
</style>
</head>
<body>
    <h1>Tajuk 1</h1>
    <h2>Tajuk 2</h2>
    <p>Perenggan 1</p>
</body>
</html>

Contoh

Property yang digunakan untuk membuat warna bagi latar belakang ialah background-color. Terdapat tiga cara untuk meletakan warna iaitu menggunakan kod warna, RGB ataupun Hexadecimal.

Menggunakan gambar sebagai latar belakang

<html>
<head>

<style type="text/css">
body
{
  background-image:
  url('pantai.jpg')
}
</style>

</head>

<body>
</body>

</html>

Contoh

Property untuk menggunakan gambar sebagai latar belakang ialah background-image:url('nama_gambar').

Anda boleh membuat latar belakang tersebut diulang beberapa kali sehingga memenuhi satu dokumen dengan menggunakan property, background-repeat: repeat seperti berikut :

<style type="text/css">
body
{
  background-image: url('pantai.jpg');
  background-repeat: repeat
}
</style>

Jika anda ingin membuat latar belakang anda hanya diulang secara menegak, property background-repeat: repeat-y, boleh digunakan. Contohnya seperti berikut :

<style type="text/css">
body
{ 
  background-image: url('pantai.jpg');
  background-repeat: repeat-y
}
</style>

Untuk membuat ulangan mendatar, property background-repeat: repeat-x boleh digunakan seperti berikut :

<style type="text/css">
body
{
  background-image: url('pantai.jpg');
  background-repeat: repeat-x
}
</style>

Berikut adalah senarai property dan value bagi latar belakang.

background-attachment - untuk menentukan latar belakang patut bergerak atau tidak jika window di scroll ke bawah.

  • scroll
  • fixed

background-color - mewarnakan latar belakang

  • rgb
  • hex
  • name
  • transparent

background-image - menghasilkan latar belakang dari gambar

  • url(URL)
  • none

background-position - menentukan posisi bagi latar belakang, hanya untuk latar belakang yang menggunakan gambar sahaja.

  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
  • x% y%
  • xpos ypos

background-repeat - menentukan latar belakang patut diulang, hanya untuk latar belakang yang menggunakan gambar sahaja.

  • repeat
  • repeat-x
  • repeat-y
  • no-repeat