CSS Backgrounds (WJH)

Hai semuanyaaaa, kali ini saya akan membahas tentang CSS3 Backgrounds. Dalam CSS3 terdapat beberapa properti baru dalam background yang dapat mengontrol tampilan dengan lebih baik. Kali ini kita akan belajar untuk menambahkan beberapa background dalam sebuah elemen, dan juga ada 3 properti baru yang lain yaitu :

1. background-size

2. background-origin

3. background-clip

Pertama kita masuk ke cara menambahkan beberapa gambar sekaligus ke dalam satu elemen.

Berikut contoh codingnya :

Jadi kira-kira seperti itu. Kita gunakan syntax biasa untuk menambahkan background image tetapi ditambahkan di belakangnya dengan menggunakan koma.

properti background-position diatas adalah untuk mengatur posisi gambar.

Properti selanjutnya adalah background size. Properti background-size berguna untuk mengubah ukuran background sesuai dengan yang kita inginkan.

Berikut contoh codingnya :

Jadi syntax yang digunakan adalah background-size : (width) (height);

Properti selanjutnya adalah background-origin. Properti ini berfungsi untuk mengatur posisi gambar. Properti ini mempunyai 3 values yang berbeda, yaitu :

1. border-box -> posisi gambar bermula dari ujung kiri atas border

2. padding-box -> (default) posisi gambar bermula dari ujung kiri atas ujung padding

3. content-box -> posisi gambar bermula dari ujung kiri atas konten

Berikut contoh codingnya :

Properti selanjutnya adalah background-clip, Properti ini b

erfungsi untuk menentukan daerah warna pada background. Sama seperti background-origin properti ini juga menggunakan tiga values, yaitu :

1. border-box -> (default) warna nya di gambar di luar area garis tepi.

2. padding-box -> warna nya di lukis di luar ujung padding gambar bermula dari ujung kiri atas ujung padding

3. content-box -> warna nya di lukis didalam content.

Berikut contoh codingnya :

Kali ini sekian sampai sini dulu yaa... Semoga bermanfaat... Tuhan Yesus memberkati !!!