• RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Increase Website And Blog Traffic:latest article for Increasing Blog and website Traffic free gide.....
  • Create and Upload Site Map to Google:Google is fist largest Search Engine by upploading SITE MAP Google Easily Search Links from Ur site in Searching.......
  • Fix WEB SITE Errors:Google and other search engines always take those site in there fist page in searching which ha too less web Errors...
  • Top 20 Search Engine:Submit Ur site to top 20 Search Engines to Increasing Ur Site Traffic and making money top search engines like as Google, Yahoo, Ask, AOl, MSN...
  • Top Social Sites:Top 100 Social sites which real help U make a Affliate Marketer and in Pormoting ur Producdts...

New Posts

How to make the background image of the blog fill the entire screen

Posted by Mohsin On 9/17/2013 10:50:00 AM 10 comments

A constant question is how to make the background image of the blog always fill the entire screen regardless of the resolution of the monitor. And that is when we put a background image as measured by our monitor forgetting that there are actually monitors of all resolutions, very small and very large. So if we put an image according to our screen, there will be someone with a bigger monitor that surely will not see the whole picture or it will be repeated, and in this case, using very small monitors, the image will be seen incomplete.

blogger tricks, blogger tutorials, blogger blogspot

Here I will talk about two solutions for this, one is using CSS3, and another is using jQuery. With either of these two, we'll make the background image of the page to fill the entire screen regardless of the resolution of it.

CSS3


The first option is using CSS3, the advantage with this method is that we do not overload the blog with scripts, we use only the background-size property that is responsible for doing what we want.
The disadvantage is that this property is supported only by modern browsers, so in the case of Internet Explorer, it will only be seen for version 9 and above, in other browsers there shouldn't be any problem.
The method is very simple, just go to Template - Edit HTML, locate the background that is within body { and replace it with this:
background: url(Image URL) no-repeat center center fixed;
background-size: cover;
Note: to find the body { tag, click anywhere inside the code area then press the CTRL + F keys and paste it inside the search box. If you can't find it, remove the space between "body" and "{" then search again.

It would look something like this:
body {
background: url(URL of the image) no-repeat center center fixed;
background-size: cover;
margin:0;
}
Just put the URL of the image and that's it.

jQuery


With this method we will use jQuery with BackStretch plugin, the advantage is that it works in all browsers, including IE7 and above. And if you already use jQuery, you don't have to worry about the loading time of your blog, because the plugin is actually small.

To use this method in your blog, go to Template - Edit HTML and before </head> paste this script:
<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>

Put the URL of the image where indicated and ready.

As you can see both options are easy to apply, each with its pros and cons, but the result is the same, stretching the background image to fit the screen of any monitor regardless of the resolution of it.

Remember that in the case of jQuery method, you should verify that you are not using Mootools or Scriptaculous, and if you already have it, you will have to implement some changes in the script to make it compatible. And if you already use jQuery remember having only one version - the last one.

10 comments:

I am regular visitor, how are you everybody? This piece of writing posted at this site is genuinely fastidious.



Also visit my weblog; parsonage loan

You have made some really good points there. I checked on the web for more
information about the issue and found most people will go along with your views on this web site.


my web-site; royalty free music list

Hi there! This is my first comment here so I just wanted to give
a quick shout out and say I really enjoy reading through your posts.

Can you suggest any other blogs/websites/forums that go over the same subjects?
Thanks!

Also visit my weblog - clinical negligence cases

I do accept as true with all the ideas you've introduced in your post.

They are really convincing and will certainly work.
Still, the posts are too quick for beginners. May you please extend them a bit from next time?
Thanks for the post.

Look into my web-site - ipod running

А fascinating discussion is worth cօmment. I think that yօu ߋught to publiѕh more
about thіs subject, it miǥht not be a taboo subject but
generally people don't speak about ѕuch subjects.
Tо the next! Best wіshes!!

Hɑve a look at mmy pagе: kitchen remodeling restaurants danvers ma area

Hey very interesting blog!

Feel free to surf to my web site network marketing

This design is wicked! You certainly know how to keep a reader entertained.
Between your wit and your videos, I was almost moved to start my
own blog (well, almost...HaHa!) Excellent job. I really enjoyed what you had to
say, and more than that, how you presented it.
Too cool!

My web site; medical negligence solicitors

Good post. I'm dealing with a few of these issues as well..


Have a look at my homepage :: search engine industry

I got this web page from my buddy who informed me about this website and at the moment this time I
am browsing this web page and reading very informative
posts at this place.

my web blog; seo experts

Hi it's me, I am also visiting this site regularly, this web site is in fact pleasant and the
users are really sharing fastidious thoughts.

Here is my blog international car shipping usa

Post a Comment

All types of Comments are welcome