background

April272013
css diagram
Pada postingan kali ini saya ingin sedikit memaparkan tentang background atau latar belakang

Latar belakang atau background adalah salah satu elemen penting pada tampilan blog karena dengan perpaduan warna yang tepat blog kita akan terlihat cantik dan enak di pandang mata serta sesuai tema yang kita pilih

Mengatur latar belakang sebuah blog pada MWB tentu menggunakan CSS bukan dengan HTML karena HTML-nya sudah dibakukan oleh mpunya MWB yaitu Arvind Gupta

Nah dalam pengaturan dalam CSS tersebut kita harus mengetahui value apa saja yang di gunakan dalam properti background ini dan seperti apa penulisannya dan seperti biasa sebelum membahasnya saya harap ketelitian dan dan jangan lupa kopi item dan menthol ice blast biggrin biar santai bacanya dan sedikit demi sedikit penjelasan ngawur saya dapet di terima oleh logika anda

background-color

Yang pertama dan terpenting dari elemen background tentu menentukan warna karena pada dasarnya warna inilah yang menjadi pembeda sekaligus identitas blog

Value dalam properti ini adalah nama warna, kode warna hexadesimal, dan kode RGB. Selain dengan warna ada dua lagi value lagi yang bisa masukan kedalam properti background-color yaitu :
- Transparent, ini adalah model dasar apabila pada sebuah selektor tidak dicantumkan deklarasi background sehingga pada tampilan nantinya akan mengikuti warna dasar yang telah ditentukan pada selektor sebelumnya
- Inherit, turunan atau warisan dari nenek moyang yang maksudnya selektor itu mengikuti pengaturan dari induk ayam nya biggrin

Dengan penjelasan maka penulisanya sebagai berikut


background-image

Setelah menggunakan warna biasanya ada juga yang menggunakan gambar tertentu untuk menambah estetika dan keindahan sebuah desain dan ini sangat sering kita jumpai di hampir semua situs baik dengan gambar statik maupun gambar animasi

Secara default apabila kita menggunakan background-image maka gambar akan berada di kiri atas dan berulang (repeat) ke dua sisinya yaitu kanan dan bawah sehingga menutupi semua areal selektor tersebut termasuk padding dan margin namun apabila di dalam sebuah elemen maka hanya padding yang tertutupi sampai batas border saja

Penulisan background-image dalam css telah ditetapkan secara standar yaitu dengan value url(asal gambar), selain itu bisa juga memakai none untuk menghilangkan gambar dan inherit untuk ikut pengaturan parent elemen selektor tersebut, apabila kita menggunakan lebih dari satu gambar dalam properti tersebut maka tanda koma harus di taruh ditengah sebagai penanda perbedaan, dengan demikian jadi contoh scriptnya seperti ini


Pada CSS3 kita sebagai kreator bisa mengeset atau mengatur lebih dari satu background dengan menggunakan tanda baca koma " , " seperti contoh dibawah ini


background-position

diagram-css-4.gif
Selain menempatkan image sebagai latar belakang tapi kita juga dapat mengatur letak latar belakang tersebut sesuai keinginan dan keindahan yang kita tuju, adapun yang di pakai selektornya yaitu background-position dengan value sebagai berikut
- menyebut nama tempat tersebut dengan spesifik, ini yang biasa kita lakukan dalam memposisikan sebuah gambar dalam css yaitu dengan cara di atas, secara default posisi background ada di tengah namun kita juga bisa mengaturnya ke sembilan posisi berbeda dengan value tersebut yaitu :
left top = kiri atas
left center = kiri tengah
left bottom = kiri bawah
right top = kanan atas
right center = kanan tengah
right bottom = kanan bawah
center top = tengah atas
center center = tengah tengah
center bottom = tengah bawah

- x% y% , Value dari pengaturan posisi yang selanjutnya adalah persentase dengan ketentuan dua garis yaitu x untuk horizontal / datar dan y untuk vertikal / tegak dimana pengaturan dasar ada pada x = 0 dan y = 0 (0% 0%) dengan artian bahwa pengaturan tersebut ada di posisi left top (kiri atas) sementara 100% 100% adalah untuk posisi right bottom (kanan bawah) dan posisi 50% untuk mengatur keberadaan latar belakang di tengah tengah
- xpos ypos , Value ini adalah pengaturan background position dengan menetapkan sesuai dengan ukuran pixel dan seperti pengaturan value persentase 0 0 (0px 0px) adalah ada di left top (kiri atas) dan x untuk horizontal sementara y untuk vertikal. Pada pengaturan ini kita harus sangat teliti terhadap ukuran dan jarak dari gambar yang kita buat background sehingga tidak terjadi kesalahan dalam menentukan tempat dan ukuran. Ada satu lagi kelebihan dari dua value untuk background-position ini yaitu kita bisa mixed atau mencampur antara pixel dan persen (50px 100%)
- Inherit , pengaturan latar belakang gambar mengikuti parent element atau pengaturan mengikuti selektor induk

Sesuai penjelasan di atas maka background-position dapat kita tulis sebagai berikut :


background-repeat

Repeat dalam bahasa Indonesia berarti ulangi dan memang fungsi dari properti ini adalah mengatur pengulangan gambar sehingga gambar merata di semua bidang selektor

Untuk value background-repeat ini adalah sebagai berikut :
- repeat, pengaturan standar yang berarti setiap image yang menjadi background akan diulangi terus ke semua sisi dari bagian selektor tersebut
- repeat-xy, script ini sebenarnya masih saya pertanyakan keabsahannya karena tidak ada dalam panduan akan tetapi masih sering melihatnya dan bekerja dengan baik, tapi sekarang kalo menurut saya mending menggunakan value repeat saja seperti di atas tanpa embel embel x dan y biggrin
- repeat-x, arti dari script ini adalah pengulangan image ke arah horizontal atau datar
- repeat-y, kebalikan dari x dimana script ini akan berfungsi sebagai perintah untuk mengulangi gambar ke arah vertikal atau dari atas ke bawah (tegak)
- no-repeat, berarti tidak ada pengulangan dari background-image tersebut
- inherit, seperti di jelaskan di atas inherit berarti pengulangan mengikuti parent elemen dari selektor tersebut

Setelah penjelasan newbie katro yang bikin mumet 1897 keliling di atas maka untuk contoh penulisan script sebagai berikut


background-size

Setengah maen dulu pemirsah biggrin ngudud jangan lupaa jangan sampe abis sama angin kipas biggrin

Salah satu elemen penting dari pengaturan background dengan gambar adalah mengatur gambar selalu sesuai dengan ukuran semua layar baik hape maupun pc anda nah selektor ini solusinya, memang setiap merk dan jenis layar tidak selalu sama resolusinya akan tetapi hal ini bisa di atasi dengan selektor ini.

Sebagai contoh ketika kita bikin css dengan nokia n70 pasti kita akan ngepasin semua gambar di blog kita dengan ukuran layar tersebut, tapi coba liat dengan nokia e63 pasti gambarnya kekecilan, begitu sebaliknya apabila kita edit dengan e63 pas dilihat di n70 pasti gambarnya cuma separoh doang biggrin

Pada properti background-size ini ada beberapa value atau nilai yang harus kita ketahui yaitu sebagaimana uraian di bawah ini :
- Jarak; value pertama tentu adalah mengatur dengan jarak, kelebihannya adalah gambar background menjadi kaku atau hanya sesuai dengan apa yang kita atur dan kekurangannya adalah tampilan yang tidak fleksibel menyesuaikan dengan resolusi layar. Value ini disarankan untuk CSS yang semuanya sudah ditetapkan lebar dan tingginya seperti pada CSS desktop MWB dasar. Penulisannya kita bisa hanya satu saja atau bisa dua value, untuk yang satu value berarti kita menetapkan tinggi dan lebar sama dan yang dua value adalah menetapkan lebar dan tinggi berbeda dan yang pertama adalah ukuran lebar sedangkan yang kedua untuk mengatur tinggi dengan contoh 100px 125px berarti 100px untuk lebar dan 125px untuk tinggi
- Persentase; salah satu pavorit para kreator CSS MWB adalah value ini karena background gambar lebih fleksibel menyesuaikan resolusi layar baik layar tancep maupun layar datar, kekurangannya ada di hasil gambar yang jadi ngeblur atau tidak jelas karena gambar kecil dilihat di layar yang lebih besar. Untuk penulisan value sama saja seperti pada value jarak yaitu ada dua yang pertama untuk horizontal (datar) dan yang kedua untuk vertikal (tegak) seperti contoh 100% 75% Dengan value tersebut berarti kita mengatur latar belakang gambar lebarnya 100% selektor dan 75% tinggi dari selektor tersebut

Ada dua value lagi yaitu cover dan contain yang berarti gambar latar belakang tersebut menutupi seluruh selektor tersebut. Dan dengan demikian penulisan pada papan tulisnya seperti demikian :


background-attachment

Background attachment adalah pengaturan background apakah fixed (tetap) atau scroll maksudnya tetap secara ukuran atau digulung di sisa halaman atau sesuai property yang dimaksud oleh selektor tersebut

Pada pengaturan attachment ada tiga value yang bisa di pakai yaitu :
- scrol = background menutupi semua halaman atau sisa halaman
- fixed = latar belakang tetap sesuai ukuran gambar asli dari asal background image tersebut
- inherit = latar belakang sesuai parent element atau induk dari selektor

Untuk penulisan bisa kita lihat melalui textarea


background-origin

Sesuai nama background origin atau asal background adalah sebuah pengaturan background yang mengatur background image tersebut relatip terhadap value yang akan di tentukan kemudian tapi dengan catatan properti ini akan berjalan apabila background attachment di atur fixed maka epek pengaturan background origin tidak akan memberi epek apapun. Adapun value dari properti background origin ini adalah
- padding-box, pengaturan background gambar relatip dimulai dari ukuran / kotak padding
- border-box, pengaturan backgroud gambar relatip dimulai dari border
- content-box, pengaturan background gambar relatip dimulai dari konten
diagram-css-3.gif

Perlu di ingat bahwa sebuah konten masih punya margin, padding dan border sehingga pengaturan background origin ini berlaku, dan setelah membaca dan mengekstrak bacaan tadi di otak kita sehingga akhirnya bisa tertulis script tersebut seperti di bawah ini :


background-clip

Pengaturan backgroud clip sama seperti pengaturan background origin yaitu menetukan daerah dimana dimulainya latar belakang tersebut bedanya dengan background origin adalah apa yang di atur yaitu pada selektor ini warna bukan gambar maka dengan demikian value-nya sama dengan background origin yaitu :
- padding-box, pengaturan background warna dimulai dari ukuran / kotak padding
- border-box, pengaturan backgroud warna dimulai dari border
- content-box, pengaturan background warna dimulai dari konten

Kemudian cara menulisnya adalah :


background

Setelah menjelaskan satu persatu elemen pada pengaturan latar belakang CSS maka kini saatnya kita akan menyatukan semua elemen tersebut kedalam satu selektor yaitu seperti contoh pada textarea di bawah ini


Script pengaturan latar belakang diatas memang terlihat ribet dan terlalu banyak yang harus kita tulis dan ingat akan tetapi dari script di atas dengan satu property yaitu property background saja dan pengaturannya seperti ini




Perlu digaris bawahi dan di ingat baik baik beberapa pengaturan dapat di ubah letaknya dan digunakan seperlunya jadi kita ketika membuat sebuah elemen selektor tidak semua harus kita tulis

Demikian penjelasan tentang background atau latar belakang sebuah selektor CSS kurang dan lebihnya mohon di maafkan karena keterbatasan pengetahuan saya serta kesalahan script maupun penulisan saya harap koreksinya dan saya sadar masih banyak kekurangan karena sempurna hanya milik Alloh dan dinyanyikan Andra and The Backbone biggrin

Artikel Terkait

  1. Border
  2. Margin
  3. Padding
  4. Kode Warna
  5. Dasar Belajar CSS Mywapblog


editor : Trinidad Budiman
judul : Tutorial CSS Mywapblog : Belajar Mengatur Latar Belakang atau Background
Bagikan ke Facebook Bagikan ke Twitter

Komentar

24 tanggapan untuk "background"

Tteguch pada 06:13, 27-Apr-13

Ada 3 yg belum pernah aq coba,. bg origin, bg atachment, bg clip... biggrin makasih tutornya kak

The Kancut Kidz pada 06:14, 27-Apr-13

Aseeekkkk namvah ilmu lagi, makasih min
♏uuªªªªn†ªªªªª

ALFARIZI BLOG pada 06:16, 27-Apr-13

Tutornya wow

Sholikhin pada 06:20, 27-Apr-13

bingung

Endru pada 06:24, 27-Apr-13

wah mantap dah gan. Ane beruntung bisa folow blog agan. Selama ini ane sedang mencari tutorial mengedit css mwb yang lengkap. Semoga dimari akan banyak ilmu yang ane pelajari. Thanz gan sudah sharing artikel ini.

Kabar berita dan informasi dari atambua

Dont Touch Me pada 06:28, 27-Apr-13

Sangat terperinci bgt pak

http://www.trikgratis.id1945.com/tentang-sifat-sifat-nabi-saw.xhtml

Fadhil LPST pada 07:06, 27-Apr-13

lengkap euy jabarannya, top lah kang idad..

Jangan lupa mampir
http://dhilzlp.heck.in/im-comback-here-bonus-2-tema-keren-free.xhtml

ipuy thea pada 07:10, 27-Apr-13

mantap infonya gan,jadi tambah lg ilmu nieh..

Mousehacker pada 07:11, 27-Apr-13

haha puyeng gan mrgreen

Eko27 Mobile Blog pada 08:36, 27-Apr-13

Yg Origin, Attachment dan Clip saya baru tahu beh smile
Terimakasih atas ilmu yg kau berikan kepada saya smile
See you later Babeh Idad smile

Kidz pada 08:56, 27-Apr-13

posting terus gan wink

sarilah pada 09:34, 27-Apr-13

kayaknya backgroundnya bisa buat hiasan pengantin nih kang trienidad.lol

тяιиιđαđ вυđιмди pada 09:41, 27-Apr-13

yang abis nikahin lagi udah aktip ternyata biggrin

Intan Baiduri pada 10:33, 27-Apr-13

Assalamu'alaikum wr wb

mt siang masta

MANTAP ne info'a,mksh ilmu'a mastasmile

Dicky Perdana pada 10:49, 27-Apr-13

seperti biasa tutornya mantab, mudah dimengerti thanks tutornya biggrin

Amac Mimac pada 11:32, 27-Apr-13

Siiiip, jadi lebih paham ane sob karna baca Artiekelmu diatas. smile
Makasih ilmunya sob & ijin save page sob smile

Haerul saleh pada 11:48, 27-Apr-13

waaaaaaa mantafs lah wa biggrin hehe

Cah Sialang pada 11:51, 27-Apr-13

makin komplit aja nih , ttg cara mempercantik blog..

ianwelah pada 12:18, 27-Apr-13

teu acan ngerti nu ieu selektor { background-attachment : fixed / scrol / inherit ; },,rek di praktekkan ah kang..

shinokun pada 12:44, 27-Apr-13

mantap sob


jg lupa kunbalnya ya.... biggrin

Widiarko Adis pada 14:07, 27-Apr-13

Assalamualaikum

Kunjungan Siang sob
blog sobat yang satu ini memang makin hari makin top ajanih ,rahasianya apa sih.,bagi2 dong biar blog ane ikut2an ngetop kaya punya sobat....?

Datang Yah Ke BLOG aKu Bagi2 Rahasianya Di
right-arrow Http://obatin.mywapblog.com left-arrow

sukses trus buat adminya..

Wassalamualaikum

yahuudcom pada 14:20, 27-Apr-13

nyimak aja min..

Lintas MWBers pada 16:09, 27-Apr-13

Assalamu'alaikum Sob ..
Saya telah kembali sobat ...
Maksudnya skrng saya sdh sempat mengunjungi blog kalian .. maaf ya kalau sebelum2 nya saya sdh tdk pernah mengunjungi blogmu sob .. mohon dimaklumi ...
dan bagi yang sudah memfollow saya tetapi belum saya folbek mohon lapor di buku tamu
Bye bye ..
Wassalam

*Maaf ya kalo komennya copas soalnya masih mau mengunjungi blog lainnya smile

Muhammad Arbain pada 09:54, 30-Apr-13

langsung save page. . .
Penting banget utk menguasai html juga. . .

Langganan komentar: [RSS] [Atom]

Komentar Baru

[Masuk]
Nama:

Email:

Komentar:
(Beberapa Tag BBCode diperbolehkan)

Kode Keamanan:
Aktifkan Gambar


 
Kembali ke Atas