Ada beberapa macam property background yang memungkinkan Anda dapat mengontrol background dari elemen.
1. background-color
Memungkinkan Anda memberikan warna pada backgroundProperty Keterangan transparent Mengosongkan warna background atau membuat elemen menjadi transparan dengan elemen dibawahnya. #FF3366 Memberi warna pada background, code #FF3366 adalah code warna hex dari warna merah, Anda bisa mengubah dengan code warna rgb atau nama warna misalnya: red (merah), black (hitam), dan sebagainya.
Contoh :
#kotak
{
background-color:#FF3366;
}
Menjadi
ELEMEN KOTAK
2. background-image
Memungkinkan Anda menambahkan gambar pada backgroundProperty Keterangan url(URL_GAMBAR) memberi gambar pada background elemen, code URL_GAMBAR bisa Anda ganti dengan url server gambar Anda. none Mengosongkan background gambar pada elemen.
Contoh:
#elemen-gambar
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg)
}
Menjadi :
ELEMEN GAMBAR
3. background-attachment
Memungkinkan Anda mengatur background gambar dengan pergeseran scroll barProperty Keterangan scroll Memungkinkan elemen background mengikuti penggeseran scroll bar. fixed Memungkinkan elemen background tidak mengikuti pergeseran dari scroll bar.
Contoh
#elemen-attachment
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg);
background-attachment:fixed
}
Menjadi
BACKGROUND FIXED
GESER SCROLL
BACKGROUND FIXES
GESER SCROLL
4. background-repeat
Memungkinkan Anda mengatur pengulangan background gambarProperty Keterangan repeat Membuat elemen gambar background menjadi berulang-ulang no-repeat tidak ada pengulangan repeat-y pengulangan vertikal repeat-x pengulangan horizontal
Contoh :
#elemen-ulang
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg);
background-repeat:repeat-y;
}
Menjadi :
PENGULANGAN BACKGROUND SECARA VERTIKAL
PENGULANGAN BACKGROUND SECARA VERTIKAL
PENGULANGAN BACKGROUND SECARA VERTIKAL
5. background-position
Memungkinkan Anda mengatur posisi background gambar Anda.Property Keterangan top left Penempatan posisi background gambar, top left adalah posisi background berada kiri atas, Anda bisa mengganti posisi menjadi :
top center
top right
center left
center center
center right
bottom left
bottom center
bottom rightx% y% mengatur posisi background secara sumbu horizontal dan vertikal, misalnya 5% 30% adalah penempatan gambar horisontal 5% dan vertikal 30%. Atau bisa menggunakan pixel, 20px 30px artinya posisi horizontal berada pada 2o pixel dan vertikal 30 pixel.
Contoh:
#elemen-posisi
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg);
background-position:top left;
background-repeat:no-repeat;
height:200px
}
Menjadi :
ELEMEN BACKGROUND
PENGULANGAN
ATAS KIRI
Dari semua perincian diatas Anda dapat menggunakan satu perincian property background saja. misalnya :
#kotak
{
background:#FFFFFF url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg) no-repeat top left fixed
}
Nah sedikit tutorial dari Saya semoga dapat membantu Anda. Sekian semoga bermanfaat.
Entri Populer
-
WA...H INILAH P artai K elompok S etan Inilah salah satu pemandangan kampanye sebuah partai yang ngaku-ngaku partai yang berbasis islam,p...
-
Mungkin anda Pernah dan bahkan kebanyakan bagi orang yang hobi download file-file di internet yang berekstension .rar dari internet ? Dan fi...
-
MUQADDDIMAH Segala puji hanya milik Allah, shalawat serta salam semoga tercurah kepada Rasulullah, keluarganya, para sahabatnya serta orang ...
-
Sebidang tanah di bumi ini yang paling dicintai oleh Allah Subhanahu wa Ta’ala adalah rumah-rumah-Nya (masjid) yang di dalamnya ditegakkan i...
-
Hardisk external merupakan barang yang tidak asing lagi bagi kita maniak komputer,baik mereka yang memang seorang " Dokter " PC ma...
Masih membahas tentang CSS (Cascading Style Sheets) background yang memungkinkan Anda dapat mengatur posisi background, warna elemen background, pengulangan background dan yang lainya. Saya akan membahas CSS yang digunakan dalam pengaturan background secara singkat dan jelas, semoga bisa sedikit membantu Anda dalam mengontrol background dari elemen.
PENGULANGAN BACKGROUND SECARA VERTIKAL
0 komentar
Posting Komentar