Mengatur Background WEB

Background adalah latar belakang elemen pada halaman html. Background bisa diterapkan pada body (keseluruhan halaman) atau bisa diterapkan untuk elemen yang lebih kecil seperti paragraf atau bahkan untuk satu teks atau satu huruf saja. Background bisa berupa warna tunggal atau berupa gambar (image).

Ada enam properti yang bisa digunakan untuk mengatur background, yaitu :

1. background-color,
2. background-image
3. background-repeat
4. background-position
5. background-attachment
6. background (penggabungan beberapa properti dalam satu deklarasi)

Dan berikut ini penjelasan masing-masing properti tersebut.

1. background-color

Adalah properti CSS yang digunakan untuk mengatur warna background.

Ada tiga cara dalam menentukan nilai warna, yaitu :

• menggunakan nama warna seperti red, blue, green dan sebagainya
• menggunakan kode heksa warna seperti #ff0000 untuk warna merah dan #0000ff untuk warna biru, dan seterusnya.
• menggunakan nilai RGB seperti rgb(255,0,0) untuk warna merah, rgb(0,0,255) untuk warna biru dan seterusnya.

Contoh penggunaan CSS background-color :

body {
    background-color: #e0ffff;
}

Kita bisa berlatih CSS background-color disini >>.

2. background-image

Adalah properti CSS yang digunakan untuk mengatur background berupa gambar (image). File gambar yang akan diterapkan pada background ditulis pada atribut URL. Secara default, gambar akan ditampilkan secara berulang secara horisontal dan vertikal untuk memenuhi area elemen yang ditetapkan.

Contoh penggunaan CSS background-image :

body {
    background-image: url("bg.gif");
}

Kita bisa berlatih CSS background-image disini >>.

3. background-repeat

Adalah properti CSS yang digunakan untuk mengatur perulangan background-image. Secara default, background-image akan diulang secara vertikal dan horizontal.

Dengan CSS background-repeat ini kita bisa mengatur perulangan dengan beberapa nilai sebagai berikut :

• no-repeat, artinya background image tidak akan di ulang.
• repeat-x, artinya background image akan diulang secara horizontal
• repeat-y, artinya background image akan diulang secara vertikal.

Contoh penggunaan CSS background repeat :

body {
    background-image: url("bg.gif");
    background-repeat: repeat-x;
}

Kita bisa berlatih CSS background-repeat disini >>.

4. background-position

Adalah properti CSS yang digunakan untuk mengatur posisi background image pada elemen html. posisi background image bisa diset left, right, top dan bottom. Salah satu fungsi dari penempatan background image agar tidak mengganggu tampilan teks pada halaman html.

Contoh penggunaan CSS background-position :

body {
    background-image: url("bg.gif");
    background-repeat: repeat-x;
    background-position : right top;
}

Kita bisa berlatih CSS background-position disini >>.

5. background-attachment

Adalah properti CSS yang digunakan untuk mengatur bagaimana background itu disematkan dalam halaman. Apakah fix atau ikut scroll bersama elemen. Secara default properti background-attachment akan diset scroll.

Ada beberapa nilai yang bisa dipakai untuk backdround-attachment :

• scroll , background ikut discroll bersama dengan elemen.
• fixed, background fix jadi saat elemen di scroll, posisi background tetap.
• local, background ikut discroll bersama dengan isi dari elemen
• initial, nilai diset sesuai nilai inisial dari elemen diatasnya.
• inherit, nilai diwarisi dari elemen diatasnya.

Contoh penggunaan CSS background-attachment :

body {
    background-image: url("bg.gif");
    background-repeat: repeat-x;
    background-position : right top;
    background-attachment: fixed;
}

Kita bisa berlatih CSS background-attachment disini >>.

6. background

Adalah properti yang bisa diisi dengan nilai dari kelima properti diatas. Jadi properti background bisa dikatakan sebagai penggabungan dari kelima properti background sebelumnya. Cara ini dipakai untuk mempersingkat penulisan.

Contoh penggunaan CSS background-attachment :

body {
     background: #ff00ff url("bg.png") no-repeat right top;
}

Pada contoh terlihat ada penumpukan antara background color dan background image. Ini digunakan untuk mencegah kekosongan background jika load image dinon-aktifkan oleh user atau image gagal dimuat karena suatu sebab tertentu. Jadi jika image tidak tampil akan diganti dengan background warna.