CSS Background

Properti Background adalah untuk membuat efek latar belakang pada sebuah element.
Ada beberapa macam properti pada Background sebagai berikut:

  • Background Color, berfungsi untuk mengatur latarbelakang sebuah element dengan warna solid.
    Contoh:

h1 {background-color:#FFFFFF;}

  • Background Image, berfungsi untuk mengatur latarbelakang sebuah element dengan gambar.
    Contoh:

h1 {background-image: url(nama-gambar.gif);}

  • Background Repeat, berfungsi untuk mengatur latarbelakang sebuah element dengan gambar yang dapat diulang atau tidak.
    Contoh:

h1 {background-image: url(nama-gambar.gif);
background-repeat: no-repeat;}

selain bernilai no-repeat juga dapat bernilai inherit, repeat, repeat-x dan repeat-y.
cobalah satu persatu untuk melihat efek yang terjadi!.

  • Background Attachment, berfungsi untuk mengatur latarbelakang sebuah element dengan gambar, apakah dapat digulirkan atau tidak.
    Contoh:

h1 {background-image: url(nama-gambar.gif);
background-attachment: fixed;}

selain bernilai fixed juga dapat bernilai inherit dan scroll
cobalah satu persatu untuk melihat efek yang terjadi!.

  • Background Position, berfungsi untuk mengatur letak/posisi gambar latarbelakang sebuah element.
    Contoh:

h1 {background-image: url(nama-gambar.gif);
background-repeat: no-repeat;
background-position: top;}

selain bernilai top juga dapat bernilai inherit, center, left, right, dan bottom
cobalah satu persatu untuk melihat efek yang terjadi!.

  • Background, berfungsi untuk mendeklarasikan semua background properti menjadi satu. Cara ini paling banyak digunakan oleh web designer karena dapat mempersingkat waktu kerja anda.
    Contoh:

h1 {background:#FFFFFF url(nama-gambar.gif) no-repeat left top;}

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *