Menjelaskan mengenai kegunaan properti background pada CSS serta nilai-nilai (values) yang dapat dimasukan pada tiap-tiap propertinya. Setelah mempelajari properti background diharapkan kita dapat mengedit properti background sesuai dengan yang kita kehendaki.
Properti Background adalah untuk membuat efek latar belakang pada sebuah element. Properties CSS yang dapat digunakan dalam efek background diantaranya:
cobalah satu persatu untuk melihat efek yang terjadi!.
Background-Attachment: berfungsi untuk mengatur latarbelakang sebuah element dengan gambar, apakah dapat digulirkan atau tidak. Contoh:
cobalah satu persatu untuk melihat efek yang terjadi!.
Background-Position: berfungsi untuk mengatur letak/posisi gambar latarbelakang sebuah element. Contoh:
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:
READ MORE - Background - Belajar CSS
Properti Background adalah untuk membuat efek latar belakang pada sebuah element. Properties CSS yang dapat digunakan dalam efek background diantaranya:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
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);selain bernilai no-repeat juga dapat bernilai inherit, repeat, repeat-x dan repeat-y.
background-repeat: no-repeat;}
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);selain bernilai fixed juga dapat bernilai inherit dan scroll
background-attachment: fixed;}
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);selain bernilai top juga dapat bernilai inherit, center, left, right, dan bottom
background-repeat: no-repeat;
background-position: top;}
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;}