CSS Background | java php laravel linux mysql sql bootstrap html css query java php laravel linux mysql sql bootstrap html css query: CSS Background

Senin, 08 Maret 2021

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.

Tidak ada komentar:

Posting Komentar

saifiahmada.com adalah blog belajar programming Indonesia, membahas lengkap materi bahasa pemrograman: code HTML, CSS, Bootstrap, Desain, PHP, MySQL, coding Java, Query, SQL, dan dunia linux