Full Page Background Image in Blogger

Many people 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 in blogger with some CSS lines.
Blogger does provide hundreds of customization options in template designer to design the template of a blog in a graphical user interface and it's very easy to use to especially for normal users who don't want like to work with codes to design their blog. But it doesn't however provide all the options for design so the only way left is using CSS manually.

Background images in blogger blogs can be changed and customized from the template designer but the options for background image is limited and you can't make much changes. Many blogger users want their blog to have a full sized background image that covers the complete background. Before you proceed to the tutorial, check how it gonna look.
   
Preview Demo Download Files

Tutorial

Doing this is very simple, just a small CSS rule needs to be added to the blog but before that you have to do some basic changes in your template to make sure no current CSS rule will override the new style.

Uploading a full size image

The background image you want to use as a full page background should be large enough to cover the entire viewport without getting pixelate. The image shouldn't be too large to be used on a web page and not even too small to be used for a full size background, it should be around 100kb - 150kb.

The CSS

This CSS adds some advanced background image properties that makes the full page background image possible. This is the CSS

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. Now proceed to the next step. 

Adding the CSS to blog

The final step is to add that CSS in your blogger template. To add the CSS, follow the steps :

1. Go to your Blogger dashboard
2. Select the Template tab
3. Click on the Customize button to open Template designer
4. Navigate to Advance -> Add CSS 
5. Paste the code in custom CSS box and click Apply to Blog

Now check your blog for the change. If it didn't worked try clearing your caches and then refresh your blog using CTRL+F5 or try adding the CSS directly in the template.