CSS Styling Background

Properti CSS Bakground (Latar Belakang) digunakan untuk menentukan efek latar belakan dari suatu elemen.

Properti yang digunakan dalam CSS Background antara lain :

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

 

Background-color

Properti Background-color menetapkan warna latar belakang dari suatu elemen.

Warna latar berlakang ini didefinisikan dalam pemilih body .

contoh : body {background-color : #b0c4de ;}

Dengan CSS, warna paling sering ditentukan adalah :

* nilai HEX – seperti “# FF0000″
* sebuah nilai RGB – seperti “rgb (255,0,0)”
* nama warna – seperti “merah”

 

Bakcground-image

Properti Background-image menentukan warna gambar untuk digunakan sebagai latar belakang suatu elemen.
Secara default, gambar diulang sehingga mencakup seluruh elemen.
Gambar latar belakang untuk halaman bisa di set seperti ini:

contoh : body {background-image:url(‘paper.gif’) ;}

 

Background-repeat

Properti Background-repeat ini digunakan untuk mengulangi gambar, baik secara vertikal atau horizontal .

Properti  :

  • repeat
  • repeat-x (pengulangan horizontal)
  • repeat-y (pengulangan vertikal)
  • no-repeat (tanpa pengulangan)
contoh :
body
{
background-image:url(‘gradient2.png’);
background-repeat:repeat-x;
}

Background-attachment

properti Background-attachment digunakan untuk menentukan apakah gambar latar belakang tetap atau scroll dengan sisi halaman .
Properti  :
  • scroll
  • fixed
  • inherit

Background-position

Properti Background-position digunakan untuk mengatur posisi awal dari background image

contoh :

body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
background-position:right top;
}

Leave a Reply

Your email address will not be published. Required fields are marked *