Belajar CSS: Memahami Background

Penggunaan background pada desain web banyak sekali kita temui, baik untuk background utama halaman web, atau background beberapa elemen di dalamnya. Pada tulisan kali ini akan dibahas secara detail tentang property background pada CSS. Properti background digunakan untuk mendefinisikan efek background pada sebuah element. Properti CSS untuk background antara lain: background-color, background-image, background-repeat, background-attachment, background-position.

Background Color

Digunakan untuk mengatur warna background pada sebuah element. Biasanya nilainya berupa hexadesimal, meskipun tidak menutup kemungkinan untuk menuliskan kode RGB atau nama warna. Berikut ini contoh penerapannya:

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

Background Image

Background image untuk mengatur gambar sebagai background sebuah element. Secara default, gambar yang digunakan sebagai background akan ditampilkan berulangkali hingga memenuhi area yang menampilkannya. url merupakan lokasi dimana file gambar tersebut berada.

body {
     background-image:url('paper.gif');
}

Background Repeat

Background Repeat berfungsi untuk mengatur apakah gambar akan ditampilkan berungkali ke arah sumbu x atau sumbu y, atau gambar ditampilkan sekali saja. Secara default, tampilan background berupa gambar akan ditampilkan baik ke arah sumbu x ataupun sumbu y. Adakalanya gambar hanya perlu ditampilkan berulangkali ke arah sumbu y atau sumbu x.

body
{
     background-image:url('gradient2.png');
     background-repeat:repeat-y;
}

Contoh kode berikutnya untuk mengatur agar tampilan background berupa gambar tidak diulangi atau hanya ditampilkan sekali saja
body
{
    background-image:url('gradient2.png');
    background-repeat:no-repeat;
}

Background Position

Property background-position digunakan untuk menentukan titik awal lokasi dari background.

Nilai dari property background position adalah berpatokan pada sumbu X dan Y. Nilai pertama adalah lokasi berdasarkan sumbu X dan nilai kedua dari sumbu Y.

Nilai yang bisa digunakan untuk background  position antara lain

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom 
Apabila anda tidak menuliskan satu lokasi saja, misalnya left, maka secara otomatis posisi lokasi kedua adalah ditengah.Contoh penggunaan:

background-position:left top;

x% y%Contoh:

Background-position:25% 75%;

 

Nilai pertama adalah posisi horisontal dan nilai kedua adalah vertical. Posisi 0% 0% berada di pojok kiri atas. Pojok kanan bawah bernilai 100% 100%. Apabila anda menuliskan hanya satu nilai, maka nilai berikutnya secara otomatis 50%. Secara default bernilai 0% 0% 
xpos ypos Deskripsinya sama dengan sebelumnya. Contoh:
Background-position: 20px 40px;

 

Pada prakteknya,seringkali penulisan background ditulis dalam satu baris. Misalnya:

body{
   background:#CCC url("images/gambar.jpg") repeat-x top left;
}

Contoh kode tersebut menunjukkan bahwa background warna yang digunakan adalah abu. Background image yang digunakan adalah gambar.jpg yang tampilannya diulang secara horizontal dengan posisi awal gambar berada pada pojok kiri atas. Apabila ukuran gambar tidak sebesar ukuran layar, maka sisa ruangnya akan terisi warna abu-abu.

Contoh penerapan background dengan css dapat anda lihat pada postingan tentang penggunaan gambar ukuran besar untuk background.

Be Sociable, Share!

Related Posts:

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *