How to Add a Background Image in Blogger Blog

Advertisements
How to Add a Background image in Blogger Blog
Are you bored with your blog and want to make it look more engaging by adding a Background image to your Blogger site? Background images can be viewed as a valuable aid for making your website look more appealing and pleasing to your users. Today in this article, we will teach how to add a background image to your blogger site easily.


By default, Blogger adds several DIV IDs and classes to write different CSS codes throughout different HTML Elements on your WordPress site. You can easily add custom backgrounds to specific posts, pages, archives or even homepage of your blogger site.

However, if you want to change the background image of your complete blogger site then go to Blogger >> Theme >> Edit HTML. Now search for skin tag, and just above it paste the following code:

body {
    background-image: url(http://example.com/images/your-background-image.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

In the above code, change the background image URL to the one that you want to see as the background image of your blog. After making all the changes, press "Save Theme" button.

Following are the few Blogger generated CSS codes that you can use for adding different background images to specific pages in blogger:

For All Posts

body.item {
    background-image: url(Your-Background-Image-URL-Here);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


For All Page

body.static_page {
    background-image: url(Your-Background-Image-URL-Here);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


For All Archives 

body.archive {
    background-image: url(Your-Background-Image-URL-Here);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

We believe this article would help you in learning how to add a background image in Blogger. If this article has helped you then, please subscribe to our mailing list and follow us on Facebook and Twitter.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

1 comments:

June 18, 2017 at 10:15 AM

Great post SYED!
Keep it up.It is quite helpful for me.

PLZ Check this site Staus:-
http://www.mythemescafe.com/

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.