Bunu iki farklı yolla çözüme kavuşturabiliriz,birincisi CSS3,ikincisi ise jQuery kullanmaktır.
1-CSS3
CSS3 ile blogunuzu aşırı kodlardan veya scriptlerden kurtabilirsiniz.Ama bu yol sadece modern tarayıcılar için çalışır.Yanı İnternet Explorer'ın bazı eski tarayıcılarında çalışmaz yanı bu tarayıcılarda arkaplan fotosunu göremezsiniz ama bu tarayıcının 9 ve üstü için çalışıyor.Diğer tarayıcılarda düzgün çalışıyor.
Bu yolla arkaplan fotosunu eklemek için Blog şablonunuzda alttaki background kodu bulun:
body {background: url(URL of the image) no-repeat center center fixed;background-size: cover;margin:0;}
Not:Bu kodu daha kolay bulmak için CTRL+F tuşlarına basın ve sağ üstte çıkacak kutuya body { kodunu yazıp Enter'a tıklayın.
URL of the image yazan yere eklemek istediğiniz resim URL'sini yapıştırın.
2- jQuery
Bu metodun avantajı ekleyeceğimiz kodun bütün tarayıcılarda çlaışmasıdır,IE7 ve üstü de buna dahildir.Eğer jQuery kullanıyorsanız blogunuzun yüklenme hızı hakkında şüpheye düşmeyin,çünkü bu eklenti oldukça küçüktür.
Bu metodla arkaplan fotosunu eklemek için Şablon>HTML'yi düzenle'ye tıklayın ve CTRL+F kombinasyonu yardımıyla </head> kodunu bulup hemen üstüne alttaki kodu yapıştırın.
<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* Version 1.2.8* http://srobbin.com/jquery-plugins/jquery-backstretch/* Add a dynamically-resized background image to the page* Copyright (c) 2012 Scott Robbin (srobbin.com)* Licensed under the MIT license* 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 />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);//]]></script><script>$.backstretch("URL of the image");</script>
URL of the image yazan yere eklemek istediğiniz resmin URL'sini ekleyin.
Gördüğünüz gibi her iki metodun da artı ve eksi yönleri olmasına rağmen uygulanması oldukça kolaydır.Her ikiside aynı sonucu verir yanı arkaplan fotonuzu ekrana veya monitöre göre ayarlar.