CSS Background

fungsi dari property backround ini adalah menentukan style untuk latar belakang dengan property background ini kita dapat

Sukses adalah keberhasilan yang anda capai di dalam menggunakan talenta-talenta yang telah Allah berikan kepada Anda. Rick Devos

fungsi dari property backround ini adalah menentukan style untuk latar belakang dengan property background ini kita dapat

Last Modif at July 10th, 2011

beberapa postingan sebelumnya saya sudah share tentang dasar-dasar css mulai dar id slector css, class selector css, pemahaman dasar css hingga penulisan css. nah, sekarang saya akan share lagi tentang css background.
mari kita mulai, seperti yang saya katakan tadi kali ini saya akan share css background atau latar belakang.
fungsi dari property backround ini adalah menentukan style untuk latar belakang(sepertinya sobat sudah tahu), dengan property background ini kita bukan hanya dapat menentukan warnanya, tapi kita juga dapat menambahkan gambar, serta mengatur posisi gambarnya, poko’e asik deh css itu. berikut property-property backround;

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

masih ingat kan cara penulisan css, seperti ini


tag html atau selector
{
property: value;
property: value;
property: value;
. . . . : . . . . . ;
}

background ini adalah salah satu property dari css, sedangkan value atau nilainya sudah memiliki aturan, property backround ini tidak harus digunakan semua. ya, kira-kira sesuai kebutuhan gitu. daripada bingung berikut rinciannya

backround-color

dari katanya saja sepertinya sudah ketahuan. yups, background = latar belakang, color = warna. maka, jadinya warna latar belakang, berikut contoh penulisan dan valuenya;

body{background-color:red; }

h1{backround-color:#ff0000; /* #ff0000 adalah code warna, warna warna lainya dapat dilihat disini */ }

keterangan;

  • value dari backround color ini adalah nama warna dalam bahasa inggris, code hex dan rgb color
  • khusus rgb color, saya ngga bahas lebih jauh, coz saya ngga pernah gunakan.(bagi saya nama warna dan hex code itu sudah cukup, ya walaupun rgb itu lebih bervariasi).

background-image

fungsi dari backround image ini adalah untuk menempatkan gambar, berikut contohnya;

body{
background-image:url (urlgambar) ;
}

ketetangan;

  • penulisan value background-image ini adalah url( disini url gambar )
  • bisa juga seperti ini url('disini url gambar'), atau seperti ini
  • url("disini url gambar")
  • perbedaanya hanya di " dan '

bakground-repeat

fungsi backround-repeat ini adalah untuk mengatur pengulangan gambar, misal gambarnya di ulang secara vertikal, horisontal, maupun diulang hingga memenuhi keseluruhan halaman, value dari bakground-repeat ini adalah

  • repeat, untuk mengulang gambar hingga memenuhi halaman
  • repeat-y, untuk mengulang gambat secera vertical
  • repeat-x, untuk mengulang gambar secara horizontal
  • no-repeat, tidak mengulang gambar, contohnya seperti ini

body{
background-image:url (urlgambar) ;
background-repeat:repeat-y;
}

background-attachment

fungsi background-attachment adalah mengatur gambar latar, apakah gambar tadi ikut bergerak jika scroll diarahkan ke bawah maupun keatas, value dari background-attachment hanya ada dua yaitu

  1. scroll, jika sobat ingin agar gambar ikut bergerak ketika scroll ke atas maupun kebawah
  2. fixed, ini kebalikan dari scroll, maksudnya gambar tidak akan ikut bergerak walaupun scroll di geser ke atas maupun ke bawah

contoh;


body
{

background-image:url (urlgambar);
background-repeat:repeat-y;
background-attachment:fixed;
}

background-position

fungsi background-position ini untuk mengatur letak gambarnya, misal kita meletakkan gambarnya atas, bawah, center, kiri dan kanan, berikut contohnya

body{
background-color:blue;
background-image:url(url/lokasi gambar);
background-repeat:repeat; background-attachment:fixed;
background-position:right top; }

keterangan;

  • jika kita menggunakan background-position ini, valuenya ditulis dua yang pertama posisi horisontal(valuenya right, center dan left), sedangkan yang kedua posisinya verikal valuenya (top, center dan bottom), jadi jika sobat menulis background-position:center center; maka hasilnya ialah posisi gambar berada di tengah, begitupun lainya misal, left bottom maka hasilnya posisi gambar di kiri bawah.
  • kita juga bisa menulis valuenya pakai px dan percent, prinsip kerjanya sama saja.
  • misal background-position:10px 20px; atau background-position:10% 5%; kalau pakai px dan percent, mulainya dari horisontal dulu, kemudian vertical, dimana value yang kita beri merupakan jarak!

shothand

shothand ini fungsinya untuk meringkas penulisan property contoh:

body{
background-color:blue;
background-image:url(url/lokasi gambar);
background-repeat:repeat;
background-attachment:fixed;
background-position:right top;
}

sama dengan

body{
background:blue url(url/lokasi gambar) repeat right top fixed;
}

untuk background penulisan shouthandnya seperti ini

tag atau selector
{
background:
<value background-color>
spasi
<value background-image>
spasi
<value background-repeat>
spasi
<value background-attachment>
spasi
<value background-position> ;
}

maaf ya, shouthand ini tidak saya bahas secara detail! untukpembelajarandan latihan, download file ini , extract kamudian jalankan beberapa file htmlnya menggunakan browser pavorit anda.
semoga bermanfaat. . . .

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

15 thoughts on “CSS Background”

  1. mulyana says:

    asskum…
    saya mau blajar tentang ini bang, blog saya masih acak acakan maklum saya masih baru, blum bgt bnyak mengenal kode kode,
    mohon bimbinganya,sallam

    1. indam says:

      sama, kita sama-sama belajar ya!

  2. Imam says:

    Terimakasih mas infonya.. salam kenal..

    1. indam says:

      yups, salam kenal juga

  3. andi says:

    desainnya keren blognya

    1. indam says:

      Thanks, salam kenal yah. . .

  4. Kando says:

    kren dah
    mulai sekarang saya akan belajat css disini

  5. ulil says:

    Ikutan belajar ah…. hehehe

  6. .. aq coba “background-repeat:repeat;” kok malah ilank ya gambarnya?!? huhh ..

    1. indam says:

      Heh, lebih telitih lagi yoooo

    2. Vpie MahaDhifa@ tadinya saya cuma numpang belajar disini dan gak mau koment, tapi pas giliran membaca koment kamu tawaku meledak hahaha jadi ikutan koment deh….!

  7. peddy says:

    aku masih bingung mas,pengennya seh dibimbing buat lebih ngerti lagi cara buat web design dan lain-lainnya…karena banyak temen saya yg beralih profesi di bidang ini,dan cukup menjanjikan seh..bisa bantu mas indam?

  8. Ryan says:

    Makasih Banyak Gan….
    ane pasang di CSS…

  9. wayan kanze says:

    nice bang thanks bget q bangga

  10. dedeiskandar says:

    terimakasih gan atas tutuorial cssnya sangat bermanfaat

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-