Minggu, November 27, 2016
Ketika kita mengunjungi halaman website atau blog, pasti kita melihat berbagai warna dan background yang beraneka macam, dari warna a sampai z, terkadang juga ada yang memakai gambar sebagai background untuk mempercantik tampilan.
Untuk membuat itu semua pasti membutuhkan properti dari css, kira-kira properti apa yang akan kita pakai? hayo ada yang tau ndak?hehee.. jangan bingung, properti itu adalah background.
Properti background mempunyai banyak jenis, namun saya hanya memberikan yang dasar-dasar saja.
Jika ingin lebih komplit silahkan kunjungi situs w3schools.com di situ banyak sekali ilmu, saya juga banyak belajar dari situs itu. maaf jika blog aisyahandyra hanya dapat menerangkan yang dasar-dasar saja.
lanjut ke topik pembahasan.
Fungsi dari Properti Background
Seperti namanya, Properti background berfungsi untuk mengatur efek latar belakang atau background pada elemen-elemen di html. Efek yang dihasilkan pun tergantung dari properti apa yang kita berikan kepada elemen tersebut.
Jenis-jenis Properti Background di Css
Diatas sudah saya jelaskan bahwa efek yang dihasilkan tergantung dari properti apa yang kita berikan, di sini kita sedang membahas tentang properti background, maka properti yang saya maksud pun adalah properti background, properti background terdiri dari beberapa jenis, diantaranya adalah :
- background-color
- background-image
- background-repeat
- background-attachment
- background position
Mari kita bahas satu persatu kegunaan atau fungsi dari jenis background diatas.
Fungsi Background-color
Fungsi dari background-color adalah menentukan warna belakang atau latar belakang atau background dari sebuah elemen html. btw ... kok penjelasannya banyak memakai kata atau ya? :-) saya juga nggak tau :-) abaikan saja, itu hanya dagelan saya.. hehee.,
Ketika memakai properti ini jangan lupa memberikan value nya ya, kalo tidak diberi value nanti tidak fungsi alias zonk.. valuenya jangan selain warna ya, nanti ndak berfungsi lho. agar lebih jelas saya beri contoh penulisannya. perhatikan di bawah ini :
<html>
<head>
<title>background-color</title>
<style type="text/css">
body{ background-color: red;}
p{ background-color: white;}
h3{ background-color: yellow;}
</style>
</head>
<body>
<p>belajar css background-color di blog aisyahandyra.blogspot.com</p>
<h3>belajar css background-color di blog aisyahandyra.blogspot.com</h3>
</body>
</html>
Metode penulisan css diatas menggunakan metode Internal Style Sheet, jika ada yang belum paham dengan istilah tersebut silahkan baca penjelasan saya di tutorial sebelumnya.
[ baca : belajar css dasar di blog aisyahandyra ]
Silahkan copy dan simpan kode diatas, lalu jalankan. hasilnya kurang lebih seperti di bawah ini :
Fungsi Background-image
Menentukan gambar yang akan dipakai untuk latar belakang atau background dari sebuah elemen html, ya iyalah menentukan gambar, wong namanya juga image, masa menentukan pasangan hidup? ckckck.. :-) abaikan.. hehee. di bawah ini adalah contoh penulisan kodenya.
<html>
<head>
<title>aisyahandyra.blogspot.com</title>
<style type="text/css">
body{
background-image: url(image/gambar-xenia.png);
}
</style>
</head>
<body>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
</body>
</html>
Metode penulisan css yang saya pakai menggunakan metode Internal Style Sheet dan Inline Style. Simpan dan jalankan kode tersebut, hasilnya seperti di bawah ini :
Lho kok mobilnya ada banyak? ndak usah kawatir, itu hanya gambar kok, ckckck.. kenapa mobilnya jadi banyak itu karena secara pengaturan bawaan, properti dari background-image akan mengulangi gambar secara vertikal dan horisontal.
Penjelasan selanjutnya akan diterangkan bagaimana agar gambar tidak berulang-ulang seperti ini.
Fungsi Background-repeat
Berfungsi untuk mengulangi gambar pada elemen yang diberi efek ini, namun secara default atau pengaturan bawaannya, jika kita tidak memberikan fungsi repeat kepada gambar yang kita pakai, maka gambar tersebut akan diulang secara vertikal dan horisontal. perhatikan contoh kodenya di bawah ini :
<html>
<head>
<title>aisyahandyra.blogspot.com</title>
<style type="text/css">
body{
background-image: url(image/gambar-xenia.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
</body>
</html>
Simpan dan jalankan kode di atas, hasilnya seperti di bawah ini :
Gambar mobil di atas sudah tidak berulang-ulang, kenapa? karena kita sudah memberikan efek no-repeat pada properti gambar mobil itu. coba sobat ganti kode no-repeat menjadi repeat-x atau repeat-y agar lebih paham dengan maksud repeat tersebut.
Fungsi Background-attachment
Menentukan gambar yang kita pakai apakah akan tetap diposisinya atau tidak, tergantung dari value yang akan kita berikan dari properti ini. value yang bisa kita berikan diantaranya : fixed, relative atau absolute. Perhatikan contoh kode di bawah ini :
<html>
<head>
<title>aisyahandyra.blogspot.com</title>
<style>
body {
background-image: url("image/gambar-xenia.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
</body>
</html>
Simpan dan jalankan kode di atas, lihat hasilnya di bawah ini :
Coba sobat amati dengan cermat gambar mobil di atas, ada yang aneh tidak pada mobil tersebut? sudah ketemu belum anehnya?
Saya jelaskan keanehannya. Perhatikan scroll pada gambar di atas, ketika scroll ditarik kebawah gambar mobil tetap anteng saja kan, nah itu aneh yang saya maksud.
Keanehan itu memang sengaja kita buat agar gambar tidak bergerak ketika scroll ditarik kemanapun. Sudah tau kan kenapa gambar mobil tetap anteng walau discroll kebawah?
Itu adalah efek dari background-attachment yang kita beri value fixed, coba sobat ganti kode fixed menjadi absolute atau relative agar lebih paham dengan penjelasan ini.
Fungsi Background-position
Seperti namanya, pasti properti ini digunakan untuk mengatur posisi gambar. langsung saja kita buat contohnya, perhatikan kode di bawah ini :
<html>
<head>
<title>aisyahandyra.blogspot.com</title>
<style>
body {
background-image: url("image/gambar-xenia.png");
background-repeat: no-repeat;
background-position: right top;
}
</style>
</head>
<body>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
<p><h1 style="color:blue;">belajar background-image di blog aisyahandyra.blogspot.com</h1></p>
</body>
</html>
Simpan dan jalankan kode di atas, hasilnya kita lihat di bawah ini :
Perhatikan gambar mobilnya, sudah berubah posisinya kan. itu karena kita telah memberikan value right top kepada properti background-position tadi, sobat ganti sendiri value nya menjadi right bottom atau yang lainnya agar lebih paham dengan penjelasan ini.
Selamat mencoba, semoga bermanfaat.