Pengenalan Property Css Dalam Menciptakan Background Website

Background atau latar belakang, merupakan salah satu komponen yang paling penting yang sering dipakai oleh desainer untuk mempercantik halaman sebuah website, intinya dalam menciptakan background website ada dua cara yang sanggup dipakai diantaranya, dengan memakai warna dan dengan memakai gambar. Berikut  akan membahas property-property yang sering dipakai dalam menciptakan background website.

Membuat Background Dengan Warna

Untuk menciptakan background atau latar belakang website dengan warna kita sanggup memakai property background atau untuk lebih mendetil sanggup memakai property background-color, dimana property ini mempunyai value warna dengan format standar, hexa, RGB. adapun cara memakai property ini sanggup 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, bila teman-teman membutuhkan acuan untuk warna hexsadecimal teman-teman sanggup melihatnya disini.

Membuat Background Dengan Gambar

Untuk menciptakan background dengan gambar hampir sama dengan menciptakan background dengan warna, menciptakan background dengan gambar juga sangat gampang diman kita sanggup memakai property background-image dimana value dari property ini ialah latak dan nama file gambar tersebut.

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

Perhatikan code diatas, teman-teman sanggup melihat bahwa kedua code tersebut menampilkan gambar yang sama namun penulisan value nya berbeda. code pertama dipakai bila 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 menciptakan 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 sanggup 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 dipakai 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 sanggup 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 tentang Pengenalan Property CSS Dalam Membuat Background Website semoga dapat membatu dan mempunyai kegunaan buat teman-teman dalam menciptakan dan berguru website.

Sumber http://pointwebsite.blogspot.com/