Belajar CSS Beground Blog Bagi Blogger Pemula

Apakah CSS Background itu?

Properties background dalam css digunakan untuk mendefinisikan efek background dalam suatu elemen

Apa saja yang ada dalam CSS Background?

Terdapat 5 properties background yang dapat digunakan dalam CSS, antara lain :

Background-color

Properti background-color ini adalah untuk menentukan warna background dari sebuah element. Contoh penggunaannya yaitu seperti dibawah ini :

body {
background-color: #b0c4de;
}

Di dalam CSS, warna ditentukan oleh:

1. HEX value – seperti “#ff0000”
2. RGB value – seperti “rgb(255,0,0)”
3. Nama Warna – seperti “red”

Untuk detail dan nama warna yang bisa digunakan bisa dicek disini

Background-image

Properti background-color ini adalah untuk menentukan background berupa gambar. Contoh penggunaan nya yaitu :

body {
background-image: url(“paper.gif”);
background-color: #cccccc;
}

Background-repeat

Secara default, properti background-repeat mengulang gambar secara horizontal dan vertikal. Gambar dapat diulang dengan menggunakan repeat-x atau repeat-y.

body {
background-image: url(“paper.gif”);
background-repeat: repeat-y;
}

Background-attachment

Properti ini menentukan bagaimana gambar terlihat, apakah fixed (tidak bergerak ketika discroll) atau scroll (bergerak ketika discroll). Value yang dapat digunakan yaitu scroll (mengikuti elemen), fixed (tidak mengikuti elemen), local, initial, dan inherit. Contoh penggunaannya yaitu:

body { 
background-image: url(‘w3css.gif’);
background-repeat: no-repeat;
background-attachment: fixed;
}

Background-position

Kita dapat menentukan posisi background, value yang dapat digunakan antara lain :

1. left top
2. left center
3. left bottom
4. right top
5. right center
6. right bottom
7. center top
8. center center
9. center bottom

Contoh penggunaannya yaitu seperti dibawah ini :

body { 
background-image: url(‘smiley.gif’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center; 
}