Skip to main content

How to Add a Background Image in Blogger Blog

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.

Comments

Popular posts from this blog

Top 4 Best Email Marketing Tools to build your blog Audience

You can either make one time sales, or you can accumulate wealth, wealth disguised as Emails, and keep making money forever, your choice.  If you passed your 5th grade in one go, I'd say you're smart enough to go with option #2. Well, that's a good choice. But people won't just give you their E-mails, right? You need to have a system in place, to scrape it off of them, without pissing them off, so that they actually pay attention to your Emails in their inboxes. Now, you can use a variety of tools for the task. But what makes most of the impact is, the design. That's what people notice before they notice anything else, ofcourse you need to have advanced options too. In this article, we will show you the top 4 best Email marketing tool to build your blog audience so you can make most of every user. 1. GetResponse: The reason for me listing GetResponse right at the top is pretty simple. Cause, it's the best. As far as feature, service and the price is concerned. ...

Watch LIVE | Polls Closed | NA120 Election

LIVE POLLS RESULT NOW STREAMING