Cara Membuat Gambar Latar Belakang Blog Mengisi Seluruh Layar

Sebuah pertanyaan yang konstan adalah bagaimana membuat gambar latar belakang blog selalu mengisi seluruh layar terlepas dari resolusi monitor. Dan itu adalah ketika kita menempatkan gambar latar belakang yang diukur oleh monitor kita lupa bahwa sebenarnya ada monitor dari 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 berulang, dan dalam hal ini, dengan menggunakanmonitor 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 ini, kita akan membuat gambar latar belakang halaman untuk mengisi seluruh layar tanpa resolusi itu. 

CSS3

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

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

 background: url center (Image URL) pusat tidak mengulang-tetap;
background-size: menutupi;

Ini akan terlihat seperti ini: 

 body {
background: url (URL gambar) pusat pusat tidak mengulang-tetap;
background-size: menutupi;
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 ia bekerja di semua browser, termasuk IE7 dan di atas. Kelemahannya adalah tidak besar jika Anda sudah menggunakan jQuery, karena plugin sebenarnya kecil. 

Untuk menggunakan metode ini dalam blog Anda, pergi ke Template - Edit HTML dan sebelum </ head>menyisipkan 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 = function (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 (document) . ready (function () {var Mobi \ / ([0-9] +) /), h =! G && g [1], i = d.match (/ MSIE ini}}) (jQuery);
/ /]]>
</ Script>
<script>
. $ Backstretch ("URL gambar");
</ Script>

Masukkan URL dari 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 pun terlepas dari resolusi itu. 

Ingat bahwa dalam hal metode jQuery, Anda harus memastikan bahwa Anda tidak menggunakan Mootools atau Scriptaculous, jika demikian Anda harus menerapkan beberapa perubahan dalam script untuk membuatnya kompatibel. 
Dan jika Anda sudah menggunakan jQuery ingat memiliki hanya satu versi , yang terakhir.