Add Background Image in Blogger – How to

How to add background image in blogger pages and post in blogger. Add custom background blogger.

Blogger simple look and feel give your reader a boring design. What if you can make it more engaging by adding a background image in Blogger. Stop overwhelming your visitors and learn how to add background image in blogger blog.

Background images gives appealing layout instead of boring white background, decorating a website with background image lead you to increase traffic to blog. A fixed background image gives your blog a parallax website effect.

Background Image in Blogger

Blogger add ids & classes to sections and divs elements. Grab those classes and add different background images to so user can distinguish sidebar and content.elements. Piece of cake to add backgrounds to specific pages, posts, archives or even homepage of your blogger blog.

Body Background Image.

Full body background image can be change via simple CSS style.

  • Login to your Blogger and Go to Theme.
  • Click on Edit HTML and search for Skin Tag.
  • Paste the below code inside skin tag.
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; }

Change highlighted text with the URL of image as you want to place at body background in blogger. Press the save button and see the changes that you applied.

Stick only to body background is boring, following other code can help you add background image to post, page, and archives.

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; }

Item class specified by blogger to change post background image. Change highlighted text with your specific post background image in blogger.

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; }

Static page class as defined for page background image. Change highlighted  text with background image url.

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; }

Adding background image in Blogger is not much difficult just copy and paste the above code what you desired.

Leave a Reply

Your email address will not be published. Required fields are marked *