ukuran background gambar ( resize ) `

Bagaimanakah cara mengubah / memodivikasi sebuah background gambar di blog anda ,dan bagaimanakah cara mengaturnya ?,,

Tips kita kali ini yaitu merubah ukuran background gambar atau ( resize background image )di blog menggunakan css .sebetulnya kalo hanya merubah ukuran gambar anda dapat merubahnya dengan contoh :photo snap ,photoShop atau lainnya .namun beda dengan css ini anda dapat merubah ukuran background gambar yang sudah anda sesuaikan pada element div .Tentang ukuran gambar / menyembunyikan gambar original silahkan baca disini ukuran gambar di blog jika sudah baca kita lanjutin topik kita hari ini yaitu merubah / resize background gambar pada element div .

 property dan value untuk merubah background gambar yaitu :
background-size sebagai property dan pixel / % sebagai value contoh : background-size:100% 100%;

pada umumnya semua browser support background-size property .

contoh gambar original :



Contoh : kita akan merubahnya menggunakan aturan css dengan lebar 360px , dan tinggi 320px .

dan code css dan html di atas seperti berikut :

<style>
.ukurangambar1{width:360px;height:320px;margin:15px 0 15px 0;padding:10px;background:url(https://sites.google.com/site/mas4nton/blognya-mastony/me%20and%20heppy.bmp);background-repeat:no-repeat;background-size:360px 320px;background-position:0 0;}</style>
<div class="ukurangambar1"></div>

kita akan buat element div agak panjang dan kita beri border pada element tersebut:

dan hasil di atas sebagai berikut code CSS dan html nya :

<style>.ukurangambar2{width:500px;height:250px;margin:15px 0 15px 0;padding:0px;background:url(https://sites.google.com/site/mas4nton/blognya-mastony/me%20and%20heppy.bmp);background-repeat:no-repeat;background-size:100% 100%;background-origin:content-box;-o-background-origin:content-box;-moz-background-origin:content-box;-webkit-background-origin:content-box;background-position:0 0;border:4px green inset;border-radius:50%;-o-border-radius:50%-moz-border-radius:50%-webkit-border-radius:50%}</style>
<div class="ukurangambar2"></div>

tentang border radius ( border lengkung ) anda dapat baca di sini sudut lengkung Rounded corner

Anda juga dapat menyesuaikan background gambar original anda , silahkan baca disini Css background original

tentang nama nama / model border anda dapat membaca disini nama - nama model border

atau biasanya anda memerlukan efek bayangan shadow silahkan baca di sini Efek bayangan shadow

tentang memmeri background di blog silahkan baca disini merubah warna background blog

dan dari sini tutorial tentang merubah ukuran background gambar di blog menggunakan css selesai
semoga artikelnya bermanfaat .

Terima kasih Anda telah membaca Artikel mengenai ukuran background gambar ( resize ) dan Kata kunci untuk Artikel ini yaitu ukuran background gambar ( resize )