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

Helplogger Home Blog DesignWidgets SEO Menus Po ... How to make the background image of the blog fill the entire screen 1 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. Here I will talk about two solutions for this, one is usingCSS3, and another is usingjQuery. 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 thebackground-sizeproperty 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 toTemplate-Edit HTML, locate the background that is withinbody {and replace it with this: background: url(Image URL) no-repeat center center fixed; background-size: cover;Note: to find thebody {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 withBackStretchplugin, 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 toTemplate-Edit HTMLand beforepaste this 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. Like 4 Random Posts Customize the scroll bar (scrollbar) with JScrollPane25/09/2013 - 2 Comments Filter out your visits to your blog from Google Analytics traffic statistics19/12/2013 - 0 Comments How To Remove Blogger Attribution Gadget22/03/2012 - 130 Comments Related Posts: How to Add CSS code To Blogger usin... How to add custom Variable definiti... Understanding the Page Elements of ... What is the difference between padd... How to Use Cookies in Javascript 1 comment: Izi Kit 2/24/2014 thank you sir .... Reply Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,786 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments irsah imihar Customizing will always be easy with jquery and javascript. Even... Missy G Yay! Thank you for making this so easy! This is just what I... divakar sivashankar admin i have a problem even if i add the tag the ad is showing up... Anonymous I don't understand the instructions you have given :( Nanette Benablo your site is very helpful and easy to follow tutorials. thank you... Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger 4 Like