0 Kerennya background position

سْمِ اللهِ الرَّحْمنِ الرَّحِيمِ
Assalamualaikum Wr. Wb . . .

Kerennya background position, Background Position adalah posisi background jadi yang akan di bahas kali ini adalah tentang Background Position, Di beberapa blog temen saya sudah ada yang menggunakan ini, teknik background position ini akan lebih indah jika di padukan dengan efek hover jadiX Magic background position jadi ketika di hover backgroundnya akan muncul sepenuhnya jika penasaran silahkan lihat demo nya.

DEMO

Jadi Pertama backgroundnya agak tersembunyi lalu saat di hover maka backgroundnya akan muncul semua emang bagus nya gitu menurut saya hehehe apalagi kalau di lihat pake Google Chrome atau Mozilla 7 mantep karena memakai transition yang lembut dan halus hehehehehe

Ok setelah di lihat sekarang kita terapkan di blog masing - masing yang berminat

1. Log In ke Blog anda
2. Klik Rancangan
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Masukan Kode di bawah ini di kotak bagian bawah lalu simpan.

<div class='systemBG'><b><center>Arahkan Cursor Anda Disini</center></b></div>
<style type='text/css'>
.systemBG {
background:#080 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDdwN0dUm9g6mI-roSNOriLOzKX3VyANRY5BHt6fpad-pYlTpz_-eYJ48Hq25nk5mgs-lWzpPwCm88T2eg4HOXVRGGeM6rpTHGsu0ezJ_MrJ1PFYDhyHK_NW5DUuxnUs-yGbviWrVggbg/s320/rocket.gif)no-repeat;
background-position:50% 225%;
-moz-background-position:50% 225%;
-webkit-background-position:50% 225%;
height:300px;
width:350px;
margin:10px auto;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
color:#0c0;
text-shadow: 0 2px -3px #000;
box-shadow: 0 0 10px #FFF;
-moz-box-shadow: 0 0 10px #FFF;
-webkit-box-shadow: 0 0 10px #FFF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:5px;
}
.systemBG:hover {
background-position:50% 20%;
-moz-background-position:50% 20%;
-webkit-background-position:50% 20%;
}
</style>

Keterangan :

Silahkan ganti kode yang saya beri warna, di bawah ini penjelasannya
Warna Hijau ► adalah kode warna background yang hijau nya silahkan ganti sesuka anda
Warna Biru   ► adalah URL background gambarnya silahkan ganti dengan gambar anda
Warna Merah 300px ► adalah Tinggi silahkan sesuaikan dengan sidebar anda
Warna Merah 350px ► adalah lebarnya silahkan anda sesuaikan dengan lebar sidebar anda.
kode <b><center>Arahkan Cursor Anda Disini</center></b> silahkan anda ganti dengan kalimat anda sendiri. jika tinggi nya anda perkecil sesuaikan juga kode 225% dengan tinggi nya.
semakin besar nilai nya maka background gambarnya akan semakin ke bawah jadi jika tinggi nya anda kurangi silahkan sesuaikan juga kode 225% nya ok sekian dari system of blog.