Pengenalan Property CSS Dalam Membuat Background Website

Background atau latar belakang, merupakan salah satu komponen yang paling penting yang sering digunakan oleh desainer untuk mempercantik halaman sebuah website, pada dasarnya dalam membuat background website ada dua cara yang dapat digunakan diantaranya, dengan menggunakan warna dan dengan menggunakan gambar. Berikut Point Website akan membahas property-property yang sering digunakan dalam membuat background website.

Membuat Background Dengan Warna

Untuk membuat background atau latar belakang website dengan warna kita dapat menggunakan property background atau untuk lebih mendetil dapat menggunakan property background-color, dimana property ini memiliki value warna dengan format standar, hexa, RGB. adapun cara menggunakan property ini dapat dilihat pada code dibawah ini.

background-color: red; /*warna STANDAR*/
background-color: RGB(0,26,0);/*warna RGB*/
background-color: #38dad3;/*warna hexadecimal*/

Jika teman-teman perhatikan code diatas ada tiga buah format value yang kita gunakan untuk property background ini mulai dari standar, RGB dan hexadecimal, jika teman-teman membutuhkan referensi untuk warna hexsadecimal teman-teman dapat melihatnya disini.

Membuat Background Dengan Gambar

Untuk membuat background dengan gambar hampir sama dengan membuat background dengan warna, membuat background dengan gambar juga sangat mudah diman kita dapat menggunakan property background-image dimana value dari property ini adalah latak dan nama file gambar tersebut.

background: url(pointwebsite.png);
background-image : url(image/pointwebsite.png);

Perhatikan code diatas, teman-teman dapat melihat bahwa kedua code tersebut menampilkan gambar yang sama namun penulisan value nya berbeda. code pertama digunakan jika file gambar yang ingin teman-teman jadikan background berada dalam folder yang sama dengan file html, beda halnya dengan code kedua file gambarnya berada diluar file html, file gambar pada code kedua ini berada pada folder image, maka harus ditambahakan nama folder kemudian slash("/") nama file gambar tesebut.

Mengenal Property Background-size

Selain dari dua property diatas dalam membuat background website juga membutuhkan property yang satu ini yaitu property background-zise, dimana property ini berfungsi untuk mengatur ukuran dari background dari background itu sendiri yang berbeda dari ukuran elemen yang membungkusnya. Untuk penggunaan property ini dapat dilihat pada code dibawah ini.

background-size: 500px;
background-size: 300px 150px;
background-size: initial;
background-size: cover;

Pada code diatas di baris pertama code tersebut berfungsi untuk mengatur width(labar) dan height (tinggi) sekaligus, namun pada baris kedua code diatas berfungsi untuk mengatur width dan height secara terpisah dimana untuk width 300px dan height 150px, pada bari ketiga code diatas initial berfungsi untuk mengatur lebar dan tinggi secara dafault(berdasarkan ukuran gambar) dan pada code baris keempat, fungsi cover digunakan untuk mengatur ukuran gambar background sesuai dengan ukuran elemen pembungkusnya.

Mengenal Property Background-position 

Propery ini juga tidak kalah penting dari property background-size, dimana property ini berfungsi untuk mengatur posisi dari background secara Horizontal maupun Vertikal. Untuk penggunaan property ini dapat dilihat pada code berikut.

background-position-y: 300px;
background-position-x: 150px;
background-position: 300px 500px;

Pada code diatas merupan code untuk mangatur posisi dari background dari ketiga bari code tersebut memilikit fungsi masing-masing code pertama berfungsi untuk mengatur background secara vertikal dengan value(nilai) 300px, kemudia code pada baris kedua berfungsi untuk mengatur posisi background secara horizontal dengan value(nilai) 150px dan pada baris code ketiga berfungsi mengatur horizontal dan vertikal sekaligus, nilai 300px untuk posisi horizontal dan nilai 500px untuk posisi vertikal.

Sekian tutorial dari Point Website tentang Pengenalan Property CSS Dalam Membuat Background Website semoga dapat membatu dan berguna buat teman-teman dalam membuat dan belajar website.