Fronted CSS from Website Development Path MySkill.id
Background Warna
Sumber gambar: https://web.dev/learn/css/backgrounds
Nilai awal background-color atau background warna adalah transparan. Hal itu memungkinkan konten pada parent terlihat. Set warna yang valid pada lapisan latar belakang akan berada di belakang hal-hal lain yang terdapat pada elemen itu.
Untuk memberikan background warna, dapat menggunakan beberapa cara mendeskripsikan value. Dapat menggunakan nama warna, function hsl, hex code, function rgb, dsb.
Background Gambar
Di atas lapisan background-color, kita dapat menambahkan background-image atau background gambar. Background gambar menerima beberapa hal berikut:
- URL gambar atau URI data menggunakan fungsi CSS url.
- Gambar yang dibuat secara dinamis oleh fungsi CSS gradient.
Pengulangan Background Gambar
Secara default, gambar background diulang (repeating background images) secara horizontal dan vertikal untuk mengisi seluruh ruang lapisan latar belakang. Kita dapat menggunakan value di bawah ini untuk menggunakan properti background-repeat:
- repeat: gambar berulang dalam ruang yang tersedia, dipotong seperlunya.
- round: gambar berulang secara horizontal dan vertikal agar sesuai dengan banyak instance ke dalam ruang yang tersedia, tanpa memotong, mengompres, atau diregangkan.
- space: Gambar berulang secara horizontal dan vertikal agar sesuai di dalam ruang yang tersedia tanpa memotong. Gambar berulang menyentuh tepi dengan spasi merata di antara gambar tersebut.
Posisi Background
Properti background-position memungkinkan kita untuk mengubah posisi background gambar. Seperti halnya background-repeat, properti background-position memungkinkan kita untuk memposisikan gambar di sepanjang sumbu x dan y. Apabila kita tidak melakukan pengulangan, maka secara default posisi background berada di kiri atas.
Ukuran Background
Properti background-size berfungsi untuk mengatur ukuran gambar background. Default-nya, gambar background diukur berdasarkan lebar, tinggi, dan rasio aspek intrinsiknya (aktual). Properti background-size menerima keyword berikut:
- auto: saat digunakan, ukuran gambar background berdasarkan lebar dan tinggi intrinsiknya.
- cover: meliputi seluruh area layer background. Hal ini berarti gambar diregangkan atau dipotong.
- contain: ukuran gambar untuk mengisi ruang tanpa meregangkan atau memotong. Akibatnya ruang kosong dapat tetap ada. Hal itu menyebabkan gambar berulang.
Tautan Background
Properti background-attachment memungkinkan kita untuk mengubah perilaku posisi fixed pada gambar background setelah lapisan terlihat di layar. Berikut adalah keyword yang diterima oleh background-attachment:
- scroll: default behavior dari properti background-attachment. Ketika lebih banyak ruang diperlukan, gambar bergerak dengan ruang itu di dalam lapisan background yang ditentukan oleh batas-batas kotak CSS.
- fixed: setelah ruang dari gambar background yang awalnya digunakan perlu discroll atau dirender ke luar layar, gambar di dalam lapisan latar belakang tetap di posisi semula.
- local: value ini memungkinkan posisi gambar background relatif terhadap konten elemen untuk akhirnya bisa discroll mengikuti konten.
Background Origin
Properti background-origin memungkinkan kita untuk memposisikan gambar background terhadap bagian kotak. Nilai yang diterima properti sesuai dengan wilayah border-box, padding-box, dan content-box dari sebuah kotak.
Background Clip
Properti background-clip mengontrol apa yang terlihat secara visual dari gambar background terlepas dari batas yang dibuat oleh properti background-origin.
Background-clip juga menerima nilai text yang memotong latar belakang tidak lebih dari teks di dalam kotak konten. Agar efek ini terlihat jelas dalam teks aktual di dalam kotak CSS, teks harus sebagian atau seluruhnya transparan.
Multiple Background
Multiple background dihitung dari lapisan atas ke bawah. Background pertama adalah yang paling dekat dengan user, sedangkan latar belakang terakhir adalah yang terjauh dari user.
Singkatan Sintaks Background
Untuk mempermudah menata lapisan background pada sebuah kotak, terutama jika kita menginginkan beberapa lapisan background, ada singkatan sintaks yang mengikuti pola khusus sebagai berikut:
background:
<background-image>
<background-position> / <background-size>?
<background-repeat>
<background-attachment>
<background-origin>
<background-clip>
<background-color>?Learn more via: https://myskill.id/course/css-backgrounds
