Sunday, 29 September 2013

How To Add a Blog Background

Many of us wants a full size Background Image for their Blog which is not possible with the basic options provided in Blogger's Template Designer. But it is Possible to Change the background image of blogger with some CSS lines only. Blogger does provide hundreds of Customization options in template designer to design the template of a blog in a graphical use interface and it is very easy to use especially for normal users who don't want or like to work with codes to design their Blog. So CSS is the only best way to do the customization manually.


Here is the Step by Step Tutorial for Changing the Background Image of Blog


Uploading a Full Size Image

The background image you want to use as afull page background should be large enought to cover the entire viewport without getting pixelate. The image should not be too large to be used on a web page and not even too small to be used for a full size background.


CSS Code

This CSS adds some advantage background image properties that make the full Page Background Image Possible. Copy the below given code and Proceed to Next Step for Pasting.
____________________________________________________
html, body {
background: url('bgimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
_____________________________________________________
Just change bgimage.jpg with the URL to your background image. It's the only change you need to make in the code. 

Adding the CSS to Blog

The final step is to add that CSS in Your Blogger Template. To add the CSS, follow these steps:

  • Go to your Blogger Dashboard
  • Select the Template Tab
  • Click on the Customize button to Open Template Designer

  • Navigate to Advance >> Add CSS
  • Paste the code in custom CSS box and click Apply to Blog

Now all done. Refresh your page to Check Out the changes .. Enjoy 

1 comments: