CSS Background

CSS  Background

Melanjutkan dokumentasi belajar css, kali ini akan membahas tentang pembuatan background untuk suatu elemen HTML.

Background Color

Untuk memberikan warna terhadap suatu element html misalnya elemen body, div, p dan element lainnya, code property css yang digunakan adalah background-color kemudian untuk valuenya diberi dengan warna, belajar warna dapat diklik tulisan sebelumnya css color.

Contoh coding html dan css background-color

Background Image

Memberikan backgraound dalam bentuk image, image dijadikan sebagai background pada suatu elemen html, property yang diguanakan adalah background-css kemudian valuenya adalah alamat dari image yang dijadikan background menggunakan function url.

Contoh coding html dan css background image :

Background Repeat

Berhubungan dengan background image apakah background image tersebut akan diulangi searah sumbu x atau sumbu y atau tidak diulangi sama sekali, property yang diguanakan adalah background-repeat dengan opsi valuenya adalah no-repeat, repeat-x, repeat-y dan repeat. Contoh coding html dan css yang menggunakan background-repeat adalah seperti ini :

Background Attachment

Bagaimana suatu background tersebut diletakkan dalam suatu wadah/element html gunakan property background-attachment dengan value yang mempunyai opsi : fixed | scroll | local, contoh codingnya adalah seperti coding di bawah ini :

 

Background Position

Cara meletakkan posisi background gunakan property background-position dengan value bottom | left | top | right | center. contohnya adalah sebagai berikut:

Background Shorthand

Untuk membuat shorthand background atau dalam kata lain penulisan singkat pembuatan background menggunakan property background untuk valuenya menggunakan urutan seperti ini :

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

Contoh codingnya adalah sebagai berikut:

Sekian dulu dokumentasi belajar css tentang background.