JUNIOR WEB PROGRAMMING

(CSS) BY:

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 1

 Materi
4

Cipta Kerja Mandiri WWW.CIPTAKERJAMANDIRI.COM 2

All No Pproperti Deskripsi

Background 1 Background- Memberi warna pada latar belakang

Properties color

2 Background- Memberi gambar pada latar belakang dari suatu element

image

3 Background- Memberi perintah pada gambar yang ada di latar belakang

repeat untuk perulangan

4 Background- Mengatur posisi gambar pada latar belakang

position

5 Background- Mengatur suatu gambar apakah mouse di scroll gambar ikut

attachment scroll atau tetap

6 Background- Menentukan gambar pada latar belakang

size

7 Background Menentukan ukuran gambar pada element secara luas

3
 Background-color
Properti background-color pada CSS merupakan property yang bisa digunakan khusus untuk
mengatur pewarnaan dari suatu latar belakang pada selector (element html).
No Jenis Nilai Nilai
1 Color red, blue, black, olive, teal, navy, lime, dsb
2 Hexadecimal #FF0000, #00FF00, #0000FF, #000000, dsb
3 red-green-blue 'rgb()' rgba(255,0,0), rgba(0%,50%,100%), rgba(0,0,255), dsb
4 red-green-blue-alpha 'rgba()' rgba(255,0,0,1), rgba(0%,100%,50%,1),
rgba(0,0,255,0.5), dsb
5 Hue-saturation-lightness 'hsl()' hsl(360,100%,50%), hsl(240,75%,50%), dsb
6 Hue-saturation-lightness-alpha 'hsla()' hsla(360,100%,50%,0.1), dsb

4
 Background-image
Property CSS ini merupakan properties yang bisa digunakan untuk mengatur
dan menentukan sebuah gambar yang akan digunakan sebagai background
dari suatu element atau selector.

Penggunaan property background-image dimaksudkan untuk menampilkan

sebuah gambar pada halaman web. Adapun value atau nilai dari property
tersebut yaitu sebuah url yang menunjukan lokasi file gambar disimpan.

5
 Background-repeat
Properti background-repeat merupakan property pelengkap dari property
background-image. Sedangkan fungsi berguna untuk mengatur perulangan
dari sebuah gambar. Perulangan tersebut apakah akan diulang secara
horizontal, vertical atau tidak diulang.

6
Berikut ini beberapa value atau nilai dari background-repeat:
No Value Deskripsi
Membuat gambar pada background melakukan perulangan secara
1 repeat
horizontal dan vertical
Membuat gambar pada background melakukan perulangan secara
2 repeat-x
horizontal
3 repeat-z Membuat gambar pada background melakukan perulangan secara vertical
Membuat gambar pada background hanya satu atau tidak melakukan
4 no-repeat
perulangan

7
 Background-position

Background-position merupakan property yang mengatur dan mengarahkan

posisi gambar dari penggunaan background image, bias dikatakan property
background-position sebagai pelengkap dari property background-image.

Fungsi dari background-position lebih mirip dengan fungsi dari property text-
align pada css. Perbedaanya, text align berfungsi mengatur posisi dari semua
elemen, sedangkan background-position digunakan bersamaan dengan
property background-image.

8
 Berikut ini beberapa value atau nilai dari background-position:

No Value Value

1 left top right top

2 left center right center

3 left bottom right bottom

4 center top 50% 50%

5 center center 50px 50px

6 center bottom initial

9
 Background-Attachment
Background-attachment merupakan property yang digunakan
bersamaan dengan background-image. Dimana fungsi dari property
tersebut untuk mengatur suatu gambar.

Background-attachment lebih sering digunakan untuk membuat

gambar pada latar belakang fixed atau diam petika mouse di scroll.
Berikut ini beberapa value atau nilai dari background-attachment:

No Value Deskripsi

1 scroll Gambar background akan bergulis jika mouse discroll

2 Fixed Gambar background akan diam/ tidak bergulir jika mouse

discroll

3 Local Gambar background akan bergulir dengan isi dari element

atau content

4 Initial Mengatur property ke nilai standar/ default

11
 Background-Size

Background-size merupakan property pelengkap dari property

background-image. Properti tersebut berguna untuk mengatur
ukuran gambar background sesuai yang diinginkan

12
Berikut ini beberapa value atau nilai dari background-size:

No Value Deskripsi
1 px, em, mm, Mengatur lebar dan tinggi dari gambar background dengan ukuran. Misal
cm, dll 10px 5px, 10px untuk lebar dan 5px untuk tinggi
2 % Mengatur lebar dan tinggi dari suatu gambar background dalam ukuran
persen. Misal 50% 25%, 50% untuk lebar dan 25% untuk tinggi
3 auto Gambar background akan ditampilkan secara asli (ukuran asli dari
gambar)
4 contain Resize image, merubah ukuran gambar dan memastikan gambar terlihat
sepenuhnya
5 cover Membuat gambar background fullscreen
6 Initial Setel value ke default

13
 Background
Properti Background merupakan property yang digunakan untuk mempersingkat penulisan
CSS. Yang artinya tidak perlu menulis property background-color, background-image,
background-repeat, maupun background-position secara bersamaan.

Value dari property background berisi value dari property lain,seperti value dari background-
color, background-image, background-repeat, atatu background-position. Berikut aturan
menulis codenya

14
 And…
It’s Time To Say Goodbye!..

15
 +62 857 21 2109 92

punten@tintapuccino.com

http://tintapuccino.com Thank You

For Your Attention!
PT Oryza Sativa Abadi
Jl. Reog no 6a OSA Building Lt.1
16