CSS background image position `

bagaimanakah cara mengatur posisi sebuah background image / gambar pada box atau element div blog anda .. sebetulnya apa itu css background image position ..?

anda akan jadi Gampang dan sangat mudah untuk mengatur posisi sebuah background gambar pada box /element div di blog anda .
background-image adalah suatu property dari CSS untuk membuat sebuah background dari file gambar ( url lokasi gambar ) . sedangkan background-position property dari CSS yang berfungsi mengatur posisi dari background gambar tersebut . adapun beberapa value untuk property background-position ini .
selengkapnya anda bisa lihat pada tabel di bawah ini .

value	keterangan
left top	background menempati posisi bagian kiri atas box anda
left center	background menempati posisi bagian kiri tengah box anda
left bottom	background menempati posisi bagian kiri bawah box anda
center center	background menempati posisi bagian tepat di tengah - tengah box anda
top center	background menempati posisi bagian atas tengah box anda
bottom-center	background menempati posisi bagian bawah tengah box anda
right top	background menempati posisi bagian kanan atas box anda
right center	background menempati posisi bagian kanan tengah box anda
right bottom	background menempati posisi bagian kanan bawah box anda
percent ( % )	sesuaikan nilai percent contoh ( 5% 5% )
pixels ( px )	sesuaikan nilai pixels nya contoh ( 5px 5px )

Tip :
background-image:url( lokasi gambar jpg);
background-repeat:no-repeat;
background-position: value | pixels ( px )| percent( % )

background gambar menempati posisi kanan atas

kita akan menguji coba pada sebuah file gambar dan untuk lebar 200px dan tinggi 200px
dan value dari background-position nya top right .

dan hasil di atas seperti berikut aturan CSS nya .

<style>.bgPositionTR{border:1px solid grey;margin:20px;padding:0;width:200px;height:200px;background:url(https://sites.google.com/site/mas4nton/blognya-mastony/feed.png);background-repeat:no-repeat;background-position:top right;}</style>
<div class="bgPositionTR"></div>

background gambar menempati posisi bagian tengah

anda juga dapat merubah posisi background tepat di tengah tengah seperti berikut ini untuk lebar dan tinggi sama dengan box di atas .

dan hasil seperti di atas sebagai berikut ini aturan CSS nya .

<style>.bgPositionTT{border:1px solid grey;margin:20px;padding:0;width:200px;height:200px;background:url(https://sites.google.com/site/mas4nton/blognya-mastony/feed.png);background-repeat:no-repeat;background-position:center center;}</style>
<div class="bgPositionTT">
</div>

posisi background menempati sebelah kiri tengah

anda juga dapat menggunakan aturan shorthan seperti berikut ini :

dan hasil dari pada di atas seperti berikut ini aturan CSS nya

<style>.bgPositionTL{border:1px solid grey;margin:20px;padding:0;width:200px;height:200px;background:url(https://sites.google.com/site/mas4nton/blognya-mastony/feed.png) no-repeat left center;}</style>
<div class="bgPositionTL">
</div>

anda juga dapat menggunakan pixels sebagai value dari property background-position dan kita akan mengatur nilai valuenya ( 0 0 )

posisi background menempati sebelah kiri atas knapa? , karena yaitu tadi kiri 0px dan ke bawah 0px .
kita akan membuat background berada pada kiri 0px dan ke bawah 30px berikut ini (0 30px).

dan hasil di atas seperti ini aturan css nya :

<style>.bgPositionPXT{border:1px solid grey;margin:20px;padding:0;width:200px;height:200px;background:url(https://sites.google.com/site/mas4nton/blognya-mastony/feed.png) no-repeat 0 30px;}</style>
<div class="bgPositionPXT">
</div>

dari sini tutornya selesai gimana ?,mantabs ndak ..
apabila artikelnya kurang bagus anda bisa tanya pada kotak komentar ..
oooouuuppsss .. di tunggu likenya lho ..

Terima kasih Anda telah membaca Artikel mengenai CSS background image position dan Kata kunci untuk Artikel ini yaitu CSS background image position