Style untuk Background

HTML & CSS Categories

Salah satu tingkat dasar dari CSS (Cascading Style Sheet) adalah mengetahui cara mengunakannya untuk Background, Text, Fonts, Links, Lists, dan Tables. Di artikel kali ini mari kita bahas satu persatu cara penggunaan style css tersebut

Style untuk Background

Properti CSS untuk background digunakan utuk membuat efek background (latar belakang) dari sebuah elemen HTML. Properti yang digunakan untuk membuat efek pada background adalah :

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

Properti background-color mendefinisikan warna dari sebuah elemen HTML. Untuk membuat warna background dari sebuah halaman web maka properti ini digunakan pada selector body HTML. contoh penggunaanya adalah sebagai berikut :

body {background-color:#000000;} 

Warna background dapat digunakan dengan :

• nama dari warna dalam english seperti "black", "blue" dan sebagainya
• nilai dari RGB (Red, Green, Blue) seperti (255,255,255)
• nilai Hex dari warna seferti "#000000", "#FFFFFF" dan sebagainya (saya biasa menggunakan ini dan nilai warna saya ambil dari photshop)

Selain digunakan pada selector body, elemen html lainya juga bisa di beri properti ini. Di bawah ini merupakan contoh penggunaan background-color untuk beberapa elemen HTM

h1 {background-color:#000000;}
p {background-color:#000000;}
div {background-color:#000000;}

properti kedua dari background adalah background-image, properti ini menggunakan gambar untuk memberi background pada sebuah elemen. Penggunaan dari properti background-image adalah sebagai berikut :

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

Pada opsi default gambar akan diulang terus sehingga background dengan gambar ini akan melatari isi dari elemen HTML. Jiga tidak ingin mengulang gambar background dan hanya ingin mengulang background secara horizontal atau vertical maka bisa kita gunakan properti background-repeat berikut contoh penggunaanya

/* Pengulangan gambar secara horizontal */
body {
 background-image:url('gambar.gif');
 background-repeat:repeat-x;
} 

/* Pengulangan gambar secara vertical */
body {
 background-image:url('gambar.png');
 background-repeat:repeat-y;
} 

/* Background tidak ada Pengulangan*/
body {
 background-image:url('gambar.jpg');
 background-repeat:no-repeat;
} 

Jika ingin mengatur posisi background gambar untuk tetap berada di tempatnya atau bisa di scroll maka kita bisa menggunakan properti background-attachment. cara penggunaanya adalah dengan memberi nilai scroll, fixed, atau inherit pada background-attachment seperti contoh berikut

body {
 background-image:url('gambar.png');
 background-attachment:fixed;
}

Properti terakhir dari css background adalah background-position, properti ini digunakan untuk mengatur posisi gambar background apakah di atas sebelah kanan, di atas sebelah kiri, di bawah sebelah kanan, di bawah sebelah kiri dan lain sebagainya. Nilai untuk properti background-position adalah sebagai berikut : left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom, x% y%, xpos ypos, inherit. contoh penggunaanya adalah sebagai berikut

body {
 background-image:url('gambar.png');
 background-position:center top;
}

selain dengan penulisan kode pada contoh-contoh di atas untuk mempersingkat penulisan style background juga bisa seperti contoh di bawah

body {
 body {background:#ffffff url('gambar.png') no-repeat right top;}
}

Posted in: