CSS Styling Background (latarbelakang)
Contoh CSS Styling Background
pengertian 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).
porperty yang di gunaakan dalam membuat backgroudn antara lain seperti ini :
2.background-image
3.background-repeat
4.background-attachment
5.background-position
contoh background color
Properti Background-color menetapkan warna latar belakang dari suatu elemen.
Warna latar berlakang ini didefinisikan dalam pemilih body .
contoh : body {background-color : #b0c4de ;}
Dengan CSS, warna paling sering ditentukan adalah :
* nilai HEX – seperti “# FF0000″
* sebuah nilai RGB – seperti “rgb (255,0,0)”
* nama warna – seperti “merah”
selain digunakan pada selector body elemen-elemen HTML yang lain juga bisa memberikan properti ini, sebagai Contoh :
1.
<!DOCTYPE html>
{h1 background-color :#b04de;}
{p background-color :#b04de;}{div background-color :#b04de;}
{h1 background-color :#b04de;}
{p background-color :#b04de;}{div background-color :#b04de;}
contoh Bakcground-image
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 :
2.
<!DOCTYPE html>
body {background-image :url ('gambar.gif');}
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 background-repeat silakan simak contoh nya :
3.
/* 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 :
4.
body {
background-image:url('gambar.png');
background-attachment:fixed;
}
contoh 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
5.
body {
background-image:url('gambar.png');
background-position:center top;
}
akhir nya selesai juga pembahas tentang Contoh CSS styling backgorud,semoga saja apa yang sudah saya berikan ini bisa bermanfaat bagi teman-teman semua,sampai berjumpa lagi ya dengan pembahasan tentang contoh CSS Styling Text.
Comments
Post a Comment