CSS Background

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. . . .