CSS Background

Posted By anasku
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.

Ada beberapa macam property background yang memungkinkan Anda dapat mengontrol background dari elemen.

1. background-color

Memungkinkan Anda memberikan warna pada background











PropertyKeterangan
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 background











PropertyKeterangan
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 bar











PropertyKeterangan
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 gambar
















PropertyKeterangan
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

PENGULANGAN BACKGROUND SECARA VERTIKAL

5. background-position

Memungkinkan Anda mengatur posisi background gambar Anda.











PropertyKeterangan
top leftPenempatan 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 right
x% 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.
Artikel Terkait untuk "CSS Background"


18 comments:

indungg said...

Nah,..kalo dah pakarnya yg ngomong gini kan enak di baca..
Baidewai kmana ajah bro?
Terima kasih pencerahannya...
Salam n Sukses..

Kampanye Damai Pemilu Indonesia 2009 said...

Mas anas boleh naruh link damai ga...?
Kampanye Damai Pemilu Indonesia 2009
ma kasih...

RAMKUR said...

Makasih banyak mas, saya memang lagi belajar otak atik backgroun nee, ini info yang keren banget :)

RAMKUR said...

Mas anas, mohon bantuanya, saya sudah berhasil bikin elemen dibawah posting, sekarang saya pengen nambah widebar di atas kedua sidebar blog saya, tapi saya pengen untuk judulnya sama persis dengan sidebar ada backgrounya, soalnya saya sudah coba dan berhasil tapi untuk judulnya tidak ada backgroun merah seperti pada sidebar, mohon bantuan dari mas anas, dan mohon maap apabila merepotkan..
terima kasih
Ramkur
www.ramkur.blogspot.com

writer said...

trim's artikelx.............kawan

OBAT KANKER said...

Dapatkan solusi pengobatan kanker secara alami
Penyembuhan Kanker Alami, Aman dan
Murah, dan Banyak Yang Sudah Sembuh juga dapat menyembuhkan diabetes mellitus
telah terbukti sangat berperan dalam proses membantu penyembuhan penyakit-penyakit kronik seperti diabetes mellitus, atherosclerosis, asma, arthritis, jantung, rematik dan segala jenis kanker seperti kanker payudara, kanker darah, kanker prostat, kanker usus, kanker kulit, dll.
Hanya di http://obatkankers.blogspot.com/
Kontes Banner Berhadiah $ 5.000
Cukup hanya dengan memasang banner gratis di blog, blogspot, wordpress, multiply, friendster. Ingin tahu lebih jauh? Lihat di sini klik HOT
• Mau cari Gosip artis Indonesia hot
Luna Maya, Ariel, Julia Perez, Sandra Dewi Dewi Persik, Sarah Azhari, Agnes Monica
• Cari lirik lagu Indonesia favorit
• Resensi Film dan Trailer terbaru
• Ribuan Game-game Seru
• Zona khusus wanita (Sexy & Sharp)
• Lagu-lagu Indonesia terbaik
• Info Sepak Bola dan bursa Mobil?
• Mau mejeng sambil cari jodoh
http://obatkankers.blogspot.com/

tutorial said...

hy,, good blog, menarik banget informasinya, sangat bermanfaat untuk mencari berita berita menarik, lumayan
lengkap, jangan lupa mampir juga ya di blog saya yang baru banyak informasi hangat dan lagi hot-hotnya sekarang,
ada berita bisnis, pekerjaan, lowongan, dan tutorial gratis, bisa dapat puluhan juta rupiah perbulan dengan ppc, selanjutnya
di:

---------------------------------
http://indoinfocom.blogspot.com/
panduan praktis mencari berita tentang teknologi dan cerita orang di seluruh dunia

gp said...

Ah asiik,, dapet blog yang cocok buat belajar,, makasih mas,,

mochal said...

weks lengkap dan jelas

D'Art said...

emang... T....O....P deh..

Kojek said...

gwa numpang belajar nih bro, sekalaian mohon izin COPAS article ini buat gwa simpan di googledoc. boleh bro?

Jituiklan.com said...

Nice artikel Bro

Kenali dan Kunjungi Objek Wisata di Pandeglang said...

Mantab bro artikelnya..:)

angga inc said...

Akhirnya ketemu juga caranya .... makasih mas !

obat glaukoma said...

makasih yah jelas sangat ama penjelasannya ....sip okeehh

penyembuhan jantung said...

aku rasa blog ni terbaik deh yang peranh aku kunjingi

Obat Diabetes said...

salam silaturahmi

obat kutil kelamin ampuh said...

tampilannya jadi lebih ramah

Post a Comment

 

Site Info

Add to Technorati Favorites
Visitor Online
Check PageRank

Recent Comments

Tutorial Jitu - Blog Info, Gadget-Widget, Blogspot tutorial, blog hack, free template, SEO And Blog tips : Admin By Luqman Khoirul Anas