Memberi Background dengan CSS

Background pada elemen HTML dapat beruba gambar atau warna, berikut adalah properti yang dapat digunakan untuk mengubah background:

background-color
background-image
background-repeat
background-attachment
background-position

Mengatur Background dengan Warna:

Contoh CSS Untuk Mengatur Warna Background

<!doctype html> <html> <head>    <title>Contoh Mengatur Warna Background dengan CSS</title>    <style type="text/css">    body{     background-color: silver;    }    p{     background-color: blue;    }    p:hover{     background-color: yellow;    }    b{     background-color: rgb(255,0,0);    }    i{     background-color: #00FF00;    }    </style> </head> <body> <h1>Belajar CSS</h1> <p>CSS merupakan make-up untuk HTML, sangat penting untuk <b>desain website</b></p> <p>Walaupun sulit tapi mengasikan, kamu bisa buat sesuai keinginan kamu</p> <i>Jangan lelah untuk mencoba</i> </body> </html>

Properti background-color digunakan untuk mengatur background dengan warna, Ada tiga cara untuk menuliskan warna pada CSS:

Struktur Warna RGB (Red Green Blue)

Warna yang dibuat dari kombinasi tiga warna tersebut,dengan nilai minimal adalah nol dan maksimal 255, contoh:

background-color : rgb(255,255,255);

Kombinasi di atas akan menghasilkan warna putih.

background-color : rgb(255,0,0); // Warna Merah

Warna Menggunakan Nilai HEX

Selain menggunakan RGB, kita juga bisa menggunakan nilai HEX untuk membuat warna, dimana warna ini juga merupakan gabungan dari Red Green Blue. Contoh:

background-color : #FFFFFF; // Warna Putih

Berikut adalah struktur dari warna HEX

#	FF	FF	FF
	Red	Green	Blue

Dua digit awal merupakan nilai dari warna merah dengan nilai minimal 0 (00) dan maksimal 255 (FF), dua digit berikutnya nilai warna hijau (green), dan dua digit berikutnya nilai warna biru (blue).

Menggunakan Nama Warna

Jika kamu merasa terlalu sulit menggunakan kombinasi-kombinasi warna seperti di atas, maka kamu bisa menggunakan cara ini:

background-color : white;

Dengan menuliskan nama warnanya (dalam bahasa Inggris), untuk lebih lengkap kamu bisa melihat daftar warna-warna itu di sini.

Mengatur Background dengan Gambar (Image)

Contoh Mengatur Gambar Background

<!doctype html> <html> <head>    <title>Contoh Mengatur Warna Background dengan CSS</title>    <style type="text/css">    div{     height: 150px;     margin: 10px;     padding: 10px;     border: solid 1px red;    }    .biasa{     background-image: url(/files/gambar1.jpg);    }    .diatur{     background-image: url(/files/gambar1.jpg);     background-position: center;     background-repeat: repeat-x;    }    .dipaskan{     background-image: url(/files/gambar1.jpg);     background-size: 100% 100%; // CSS3    }    </style> </head> <body> <h1>Belajar Mengatur Background CSS</h1> <div class="biasa">Ini diberi background tanpa mengatur properti lainnya.</div> <div class="diatur">Ini diberi background dengan mengatur repeat dan posisinya.</div> <div class="dipaskan">Ini diberi background dan dipaskan dengan elemen ukuran elemen.</div> </body> </html>

Background-image berisi lokasi dari file gambar yang akan digunakan sebagai background. Untuk mengatur posisinya gunakan background-position.
Secara default jika ukuran dimensi gambar lebih kecil dari luas elemen yang akan diberi background, maka gambarnya akan di-repeat sampai semua wilayah elemen tertutupi. Untuk mengatur repeat ini gunakan background-repeat. Nilai yang dapat digunakan adalah repeat (defaultnya), repeat-x, repeat-y, dan no-repeat.