Cara Agar Background Blog Menjadi Seluruh Layar

Menggunakan gambar untuk background blogger anda sangatlah menjadi bagus jika dilihat. Tetapi ada kendala dari semua itu saat blog anda dipasang sebuah gambar pada blog, dan gambar akan dipasang tersebut kecil sehingga setelah dipasang akan tampil tidak bagus, tampilnya akan seperti gambar diulang ulang. Untuk itu mari kita ikuti solusinya dibawah ini :

Sebuah pertanyaan yang konstan adalah bagaimana membuat gambar background blog selalu mengisi seluruh layar terlepas dari resolusi monitor. Dan itu adalah ketika kita meletakkan gambar latar belakang yang diukur oleh monitor kami lupa bahwa sebenarnya ada monitor semua resolusi, sangat kecil dan sangat besar. Jadi, jika kita menempatkan sebuah gambar sesuai dengan layar kami, akan ada seseorang dengan monitor yang lebih besar yang pasti tidak akan melihat seluruh gambar atau akan diulang, dan dalam hal ini, dengan menggunakan monitor sangat kecil, gambar akan terlihat tidak lengkap.

Di sini saya akan membahas dua solusi untuk ini, satu menggunakan CSS3, dan lain dengan jQuery. Dengan salah satu dari dua, kita akan membuat gambar latar belakang halaman untuk mengisi seluruh layar terlepas dari resolusi itu.

CSS3

Opsi pertama adalah menggunakan CSS3, keuntungan dengan metode ini bahwa kita tidak membebani blog dengan script, kami hanya menggunakan properti background-size yang bertanggung jawab melakukan apa yang kita inginkan.
Kelemahannya adalah bahwa properti ini hanya didukung oleh browser modern, sehingga dalam kasus Internet Explorer, hanya akan terlihat untuk dan atas versi 9, di browser lain seharusnya tidak ada masalah.

Metode ini sangat sederhana, hanya pergi ke Template - Edit HTML, cari background yang ada di dalamtubuh {dan menggantinya dengan ini: 

 background: url (URL Gambar) pusat pusat tidak mengulang tetap;
background-size: tutup;

Ini akan terlihat seperti ini: 

 body {
background: url (URL gambar) pusat pusat tidak mengulang tetap;
background-Ukuran: penutup;
margin: 0;
color: # 000;
Font: x-kecil Georgia Serif;
font-size / ** / ** :/ / kecil;
font-size: / ** / kecil;
text-align: center;
}

Hanya menempatkan URL gambar dan hanya itu.

jQuery

Dengan metode ini kita akan menggunakan jQuery dengan Plugin Backstretch, keuntungan adalah bahwa bekerja di semua browser, termasuk IE7 dan di atas. Kelemahannya adalah tidak besar jika anda sudah menggunakan jQuery, karena plugin sebenarnya kecil.

Dengan menggunakan metode ini dalam blog Anda, pergi ke Template - Edit HTML, dan sebelum </ head>tempel script ini: 

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
/ / <! [CDATA [
/ *
* JQuery Backstretch
* Versi 1.2.8
* Http://srobbin.com/jquery-plugins/jquery-backstretch/
* Tambahkan gambar latar belakang dinamis ukurannya ke halaman
* Copyright (c) 2012 Scott Robbin (srobbin.com)
* Izin dibawah lisensi MIT
Https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt *
* /
; (Function (a) {a.backstretch fungsi = (p, b, l) {function s () {if (P) {var b;? 0 == c.length c = a ("<div l && l ()})}) appendTo (c);. 0 == a ("tubuh window && window.pageYOffset === 0 && window.scrollTo (0,1); q ()})}} function o, m, r, n, h, f, k, j, b && "objek" == typeof b && a.extend (g b); b && "fungsi" == typeof b && (l = b), sebuah (dokumen) siap. (function () var { Mobi \ / ([0-9] +) /), h =! G && g [1], i = d.match (/ MSIE ini}}) (jQuery);
/ /]]>
</ Script>
<script>
. $ Backstretch ("URL gambar");
</ Script>

Masukkan URL gambar di tempat yang ditentukan dan siap.

Seperti yang Anda lihat kedua sistem yang mudah diterapkan, masing-masing dengan pro dan kontra, tapi hasilnya adalah sama, memperluas gambar latar belakang agar sesuai dengan layar monitor setiap terlepas dari resolusi itu.

Ingat bahwa dalam kasus metode jQuery, Anda harus memastikan bahwa Anda tidak menggunakan Mootools maupun Scriptaculous, jika demikian Anda akan harus melaksanakan beberapa perubahan dalam script untuk membuatnya kompatibel.