Skip to content
This repository has been archived by the owner on Jan 28, 2024. It is now read-only.

refactor(css): refactor background css topic based on guideline #77

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

refactor(css): refactor background css topic based on guideline #77

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d59b13b
v.1
chrisdionisius Apr 4, 2020
0d363b6
Merge pull request #1 from chrisdionisius/chrisdionisius-patch-1
chrisdionisius Apr 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 57 additions & 8 deletions dasar/css/background.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,54 @@
# 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 :
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ini langsung ke materi ya, tambahin permalasahan dong, kenapa kita butuh nentuin background di web.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nggih mas, segera saya kerjakan

1. Background Color
2. Background Image
3. Background Repeat
4. Background Position
5. Background Attachment

## 1. Background Color

Kita bisa merubah warna background suatu elemen menggunakan property `background-color`

```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`
Comment on lines +30 to +31
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

opacity ini kyknya ga perlu, soalnya dia gak termasuk background, ntar bisa dimasukin ke materi lain

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Baik mas,
pikir saya soalnya ada rgba value jadi saya masukkan 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');
Expand All @@ -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 */
Expand All @@ -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 */
Expand All @@ -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;
}
```