From d59b13b0ba955aeb87d0a970883b89c4e2a0548e Mon Sep 17 00:00:00 2001
From: chrisdionisius <57022609+chrisdionisius@users.noreply.github.com>
Date: Sat, 4 Apr 2020 21:27:50 +0700
Subject: [PATCH] v.1

---
 dasar/css/background.md | 65 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 57 insertions(+), 8 deletions(-)

diff --git a/dasar/css/background.md b/dasar/css/background.md
index fe9c580..ea33128 100644
--- a/dasar/css/background.md
+++ b/dasar/css/background.md
@@ -1,6 +1,11 @@
 # Background
 
-Dengan menggunakan CSS, kita dapat memberikan background pada elemen HTML seperti div
+Dengan menggunakan CSS, kita dapat memberikan background pada elemen HTML seperti div. Terdapat beberapa jenis property untuk mengganti background sebuah elemen yakni :
+1.  Background Color
+2.  Background Image
+3.  Background Repeat
+4.  Background Position
+5.  Background Attachment
 
 ## 1. Background Color
 
@@ -8,25 +13,42 @@ Kita bisa merubah warna background suatu elemen menggunakan property `background
 
 ```css
 body {
-  background-color: lightblue;
+  background-color: lightblue; /*menambahkan background berwarna biru muda pada elemen body*/
 }
 h1 {
-  background-color: green;
+  background-color: #00FF00; /*menambahkan background berwarna hijau pada elemen h1 dengan hex value*/
 }
 
 div {
-  background-color: lightblue;
+  background-color: rgb(0,0,255); /*menambahkan background berwarna biru pada elemen div menggunakan rgb value*/
 }
 
 p {
-  background-color: yellow;
+  background-color: hsl(0, 87%, 81%); /*menambahkan background berwarna pink pada elemen p menggunakan hsl value*/
+}
+```
+## Opacity
+Kita juga dapat memberikan efek transparan pada sebuah background elemen dengan property `opacity`
+
+```css
+div {
+  background-color: lightblue;
+  opacity:0.4;
 }
 ```
+*note : penggunaan property opacity juga berdampak pada semua child element dari suatu elemen yang memiliki property opacity, sehingga bisa jadi konten dalam element tersebut juga terkena efek tranparan, untuk mengatasi ini kita bisa menggunakan rgba value.
+
+```css
+div {
+  background-color: rgba(76, 175, 80, 0.3); /* menambahkan warna hijau dengan 30% efek transparan pada div */
+}
+```
+
+
 
 ## 2. Background Image
 
 Kita juga bisa merubah background menggunakan image tertentu, caranya dengan menggunakan property `background-image`
-
 ```css
 body {
   background-image: url('bgdesert.jpg');
@@ -35,7 +57,8 @@ body {
 
 ## 3. Background Repeat
 
-Apabila image yang kita jadikan background tidak cukup besar, maka kita bisa melakukan repeating pada image tersebut menggunakan property `background-repeat`
+Apabila image yang kita jadikan background tidak cukup besar, maka kita bisa melakukan repeating pada image tersebut menggunakan property `background-repeat`.
+Namun secara default jika kita memiliki sebuah gambar yang lebih kecil dari ukuran elemen yang dipasangi background maka gambar akan secara otomatis melakukan repeat baik secara vertikal maupun horizontal sampai background elemen tercover seluruhnya
 
 ```css
 /* repeat secara horizontal */
@@ -59,7 +82,7 @@ h1 {
 
 ## 4. Background Position
 
-Apabila image yang kita jadikan background terlalu besar, kita dapat memposisikan background tersebut menggunakan property `background-position` dan diisi dengan posisi horizontal dan vertical
+Property background position digunakan untuk mengatur posisi gambar yang digunakan untuk background elemen. Untuk mengaturnya kita dapat menggunakan property `background-position` diikuti dengan value horizontal align dan vertical align. 
 
 ```css
 /* posisikan background secara horizontal center dan vertical center */
@@ -73,4 +96,30 @@ div {
   background-image: url('background.jpg');
   background-position: left top;
 }
+
+/* penggunaan background-position diikuti dengan property background-repeat jika gambar terlalu kecil */
+body {
+  background-image: url("img_tree.png");
+  background-repeat: no-repeat;
+  background-position: right top;
+}
+
 ```
+
+## 5. Background Attachment
+Property ini dapat digunakan untuk mengatur apakah posisi background fixed atau tidak (jika di scroll ikut background ikut turun mengikuti laman).
+```css
+/* posisikan background fixed */
+body {
+  background-image: url("img_tree.png");
+  background-attachment: fixed;
+}
+
+/* posisikan background scroll */
+body {
+  background-image: url("img_tree.png");
+  background-attachment: scroll;
+}
+```
+
+