How to Add a Background Image in Blogger Blog

Socialize It →

Tweet

1

Advertisements

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

About the Editorial Team

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