Bab II : Belajar CSS Bagian 1 ( Background )

Setelah saya memperkenalkan CSS baik penjelasan dan contohnya pada bab 1
Perkenalan CSS
Sekarang mari kita pelajari materi selanjutnya yaitu Bab II : Belajar CSS Bagian 1 ( Background )

Bab II : Belajar CSS bagian 1 cara Mendesain Background
Disini akan di bahas tentang :
1. Cara merubah warna background dengan CSS
2. Cara meletakan gambar background dengan CSS
3. Cara mengatur gambar agar tidak terulang atau di ulang secara horizontal ataupun vertikal dengan CSS
4. Cara mengatur posiri gambar pada background dengan CSS
5. Cara membuat warna, gambar, aturan repeat, posisi pada background secara singkat dengan CSS

Tahap Sebelumnya | Bab I : Perkenalan CSS |

Kali ini saya akan membahas cara-cara mendesain dengan CSS bagian pertama yaitu cara membuat/desain background

Background
Ini adalah awal dari pembelajaran kita, saya akan memulainnya dari background.

dalam background ada bermacam-macam perintah diantaranya yaitu menentukan warna, gambar, posisi, perintah repeat.

   1. Warna background (Background Color)
       Value / nilai dari warna background dapat ditentukan dengan HEX seperti (#fff, #000), RGB seperti (255,255,255) ataupun menggunakan kata warna dalam bahasa inggris seperti black, white. Namun yang paling umum digunakan yaitu HEX dan kata warna. Tidak ada yang membedakannya, semuanya sama saja, terserah kamu mau pakai yang mana : Rumusnya :

Selector {background-color:kode warna;}

# Keterangan :
kode warna : dapat kamu ganti dengan HEX, RGB atau kode warna b. inggris

Penulisannya yaitu sebagai berikut

body {background-color:{#000;}     warna dalam bentuk hex, akan jadi seperti :

body {background-color:(255,255,255)}    warna dalam bentuk rgb, akan jadi seperti :

body {background-color:blue;}     warna dalam bentuk kata, akan jadi seperti

   2. Gambar Background (Background Image)
 Gambar background maksudnya yaitu meletakan gambar pada background pada suatu web, bisa itu untuk dipasang di body, untuk background kotak komentar dan lain-lain.

Rumusnya yaitu :

Selector {
background-image:url('alamat / letak gambar');
}


#Keterangan :
alamat / letak gambar : tempat meletakan url / letak gambar yang dituju

 Silahkan lihat contoh berikut :

body {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-tINLBLiC2zEeSwO6YL3vJMNZe-7FiRm2Wx_cCKDa5agIrFxp_cxTSCp7rFjKo-NtsnE3_t1Ns3LemyrvJxFC96Szm955KSlijhkGNgWRG2jnjWlGAPAwJHDGC1KwGKkzBRUkq9jHsShA/s1600/Fx1.png');
}

 Maka akan terlihat seperti ini :

       Gambar secara default atau standar akan terulang terus. Untuk mengatasinya jika ingin  memasang gambar tanpa pengulangan atau pengulangan secara vertikal atau horizontal silahkan simak rumus berikut :

Rumus membuat gambar tanpa pengulangan, pengulangan horizontal dan vertikal:

Selector {
background-image:url('alamat / letak gambar');
background-repeat:perintah;
}
#Keterangan
perintah : dapat kamu masukan dengan perintah yang diinginkan, perintah-perintahnya silahkan lihat di bawah ini :

• no-repeat          perintah untuk tidak mengulang gambar
• repeat-x            perintah untuk mengulang gambar secara horizontal
• repeat-y            perintah untuk mengulang gambar secara vertikal

   3. Posisi Background (Background Position)
       Cara ini berguna untuk menetapkan posisi background, baik itu di atas ataupun secara spesifik seperti pojok kanan atas, pojok kiri bawah dan lain-lain,

Rumusnya :

Selector {
background-image:url('alamat / letak gambar');
background-repeat:perintah;
background-postition:perintah;
}

#Keterangan
perintah : yaitu dengan metode kata posisi dalam b. inggris seperti top, right, bottom, left
contohnya :
background-postition:right;
contoh lain :
background-postition:top left;

Membuat Background dengan metode singkat
Setelah mempelajari cara-cara di atas ada satu cara lagi dimana kita dapat melakukan ke empat cara di atas menjadi lebih singkat.

Rumusnya yaitu :

Selector {
background:warna background url('alamat gambar background') perintah pengulangan perintah posisi;
}

Jika saya buat contohnya yaitu seperti ini :
background:black url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-tINLBLiC2zEeSwO6YL3vJMNZe-7FiRm2Wx_cCKDa5agIrFxp_cxTSCp7rFjKo-NtsnE3_t1Ns3LemyrvJxFC96Szm955KSlijhkGNgWRG2jnjWlGAPAwJHDGC1KwGKkzBRUkq9jHsShA/s1600/Fx1.png') no-repeat center;

maka akan menjadi seperti ini :

Note : Jika yang akan dibuat warna dan background saja tanpa repeat dan posisi dilakukan sama seperti cara diatas dengan penghapusan perintah pengulangan dan posisi 
maka akan jadi seperti ini :
background:black url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-tINLBLiC2zEeSwO6YL3vJMNZe-7FiRm2Wx_cCKDa5agIrFxp_cxTSCp7rFjKo-NtsnE3_t1Ns3LemyrvJxFC96Szm955KSlijhkGNgWRG2jnjWlGAPAwJHDGC1KwGKkzBRUkq9jHsShA/s1600/Fx1.png')

| Bab III : Belajar CSS bagian 2 ( Font / Tulisan ) | Tahap Berikutnya

Farkryzer