Belajar CSS - Mengatur Background Dengan CSS

Hello Teman teman, bagaimana hari hari kalian? Semoga selalu Berjalan dengan baik. aamiin
Setiap halaman pasti memilik latar belakang, atau disebut dengan background, background itu bisa terdiri dari gambar dan juga warna.
Di dalam design sendiri, ini adalah suatu hal yang sangat penting, karena keindahan pada background bisa membuat seseorang nyaman dan tidak nyaman, tergantung dengan cara kita membuat dan mengaturnya.
Oleh karena itu Pada kesempatan ini, kita akan mencoba membahas tentang Mengatur Background dengan CSS, Karena kemarin kita sudah memahami tentang ...

BELAJAR CSS | MENGENAL STRUKTUR DASAR CSS

BELAJAR CSS | MEMAHAMI SELECTOR ID DAN CLASS 

dan semoga dipastikan teman teman untuk memahami nya yah. Tenang itu gampang, tidak sesulit memahami Pacar mu :v

Oke langsung Saja.

Background CSS

Mari kita masuk kedalam Pembahasan.

Pengertian Background

Menurut saya pribadi, background atau latar belakang adalah sebuah komponen penting di dalam sebuah penampilan, mulai dari design banner ataupun lainya. dan itu sangat penting bagaimana cara kita membuat background agar tidak terlihat norak, atau sakit dimata.

Nah pada kali ini , kita akan mencoba untuk membuat Background dengan CSS, 

Bagaimana cara nya?? SIMAK !

Cara Mengatur Background dengan CSS

Untuk Mengatur background dengan CSS, disini kita akan langsung menggunakan sebuah Selector body yah teman teman, contoh.

/*style.css*/

body {
 background-color: #DCDCDC;
}

pada bagian diatas saat ini kita sedang menggunakan sebuah Property 

 background-color: #DCDCDC;

Jika kita cek hasil nya adalah seperti ini.

Background Color

Selain dengan background-color: ; , masih ada lagi yaitu kita akan mencoba dengan background-image: ;

/*style.css*/

body {
 background-color: #DCDCDC;
 background-image: url(CSS.3.svg_.png);
 background-repeat: no-repeat;
 background-size: 400px;
 background-position: center;
 background-attachment: fixed;
}

Oke akan beri penjelasan disini.

background-color: #DCDCDC;

pada penggunaan background-color : ; | maka yang akan berubah hanyalah sebuah warna di latar belakang halaman ini. seperti pada contoh gambar diatas.

background-image: url(CSS.3.svg_.png);

Pada bagian ini , kita menggunakan property background-image: url() ; | dan yang akan berubah disini adalah, background / latar belakang kita menjadi gambar.

background-repeat: no-repeat;
background-size: 400px;
background-position: center;
background-attachment: fixed;

Untuk penjelasan diatas adalah seperti ini.

background-repeat: ; di property ini terdapat beberapa nilai , yaitu repeat, repeat-y, repeat-x, dan no-repeat. Jika pada CSS diatas saya menggunakan no-repeat berarti gambar yang menjadi background tidak boleh mengulang, alias hanya boleh 1 saja. Sedangkan repeat-x dan repeat-y ini adalah posisi kearah mana background tersebut mengulang. 

background-size: ; pada property ini adalah ukuran dari background gambar itu sendiri.

background-position: ; di dalam property ini, ada beberapa yaitu right, left, center, dan mungkin teman teman bisa menggunakan gabungan seperti right-top dan sebagainya, silahkan bereksperimen.

background-attachment: ; sedangkan dalam property ini, adalah keadaan background itu sendiri, apakah dia akan ikut bergerak ketika kita scroll atau tetap diam saja.

 Nah pada bagian terakhir ini, kita akan mencoba penulisan lebih singkat pada CSS

background: #DCDCDC url(CSS.3.svg_.png) no-repeat center fixed

hasil dari CSS diatas adalah

Background CSS

Oke baiklah teman teman, mungkin segitu dulu yah pembahasan tentang Setting Background with CSS.

Semoga bermanfaat, sekian dan permisi.

Salam Semangatt!!

Berbagi :