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 :
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 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.
Thanks to Chris Coyier
I would like to thank Chris Coyier of csstricks.com for sharing this CSS snippet. If you want to learn CSS and web designing in a fun way then his website is perfect for you.
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 :
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 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.
Thanks to Chris Coyier
I would like to thank Chris Coyier of csstricks.com for sharing this CSS snippet. If you want to learn CSS and web designing in a fun way then his website is perfect for you.
