Cara Membuat Background Blog Gambar Menjadi penuh merata

print this page
send email
Assalamualaikum wr wb...
Malem mwb semua,tentunya masih dalam keadaan sehat kan? Kalau gitu saya ucapkan alhamdulillah,dipertemuan kali ini saya akan sedikit membahas trik agar gambar background pada css menjadi full satu layar.Tentunya dengan ukuran gambar yang kecil akan bisa tampil menjadi gambar yang besar.Bagi yang udah tau silahkan nyimak aja.

Triknya sangat mudah kita hanya perlu satu property yaitu "background-size:".Yaps itulah property untuk membuat gambar pada latar background menjadi layar penuh. Saya akan beri sedikit contoh:

body {background: url(http://alamat gambar kamu.com);margin:0;padding:0;background-size:100% 100%}

Maka hasilnya akan seperti klik Disini.
Padahal gambar yang saya gunakan ukurannya 160x260.

Sobat bisa mengganti angka 100% menjadi berapapun semau sobat,tapi kalau ukuran satu layar penuh makan gunakan background-size:100% 100%.Property background-size bisa digunakan diberbagai element css contoh di header,content,post dll.
Memang secara kualitas gambar menjadi sangat menurun,tapi bagi saya sudah cukup lumayan bagus. Yang penting sobat tidak repot membuat gambar dengan ukuran yang sangat besar.

Untuk masalah loading juga lumayan ringan sob,jadi tak ada salahnya jika sobat berkreasi membuat sesuatu yang baru dengan css.Demikian sobat postingan saya hari ini,semoga bermanfaat untuk sobat. Jika ada kurang lebihnya saya minta maaf,dan terimakasih telah setia berkunjung keblog reot ini biggrin
Wassalamualaikum wr wb...
Comments
9 Comments

9 komentar:

  1. ini kode nya diletakan sebelah mana?
    kalau gk tau, berarti ini boleh copas

    BalasHapus
  2. Jadi Gambarnya Pecah Pecah Donk Kalo Gambar Aslinya Kecil :D

    www.masnhoo.blogspot.com

    BalasHapus
  3. waduh gan,, setelah saya terapkan, backgroundnya saling tarik menarik,, padahal size background sdh ribuan,, gimana ya?
    saya kembalikan lagi, masalahnya skrg di blog saya ini http://jomblolink.blogspot.com/ , kiri kanannya kosong / gelep.. haha

    BalasHapus
  4. Mantap.
    Terima kasih ilmu nya.
    Semiga sukses selalu.

    Https://terangbulanweb.blogspot.com

    BalasHapus
  5. terima kasih sudah berbagi ilmunya gan.

    BalasHapus
  6. share terus ilmunya boss, biar semua bisa sama2 belajar.

    BalasHapus

Obrolan