Monday, August 17, 2015

To add background image to your blogger template

All the blogger templates will have background. Some will have background image embedded in them and some will have HTML generated colored background. Whatsoever, there is little chance we can make customization. 

But we can override the default background and add another one from our side. This will provide us an option to add background that is quite related to our tastes. Therefore, to get it let us consider the following steps:

Login to your blog>Click on Template>Click on Edit HTML>Find (Ctrl+F): body { There will be many of such codes. It should appear something like below:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

In above code, there isn't any option where we can add background image to our blog template. Let us add another HTML to facilitate us to add image:

background-image: url(URL address of your image);

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
background-image: url(http://www.hd-wallpapersdownload.com/upload/bulk-upload/desktop-nature-wallpapers-photos-dowload.jpg);
}

I have added the highlighted HTML to add my background image. If you have added everything correctly, click on preview to make sure you have done correctly. In preview, if background image appears, then you have done it correctly. You may click on Save Template. Cheers!

No comments:

Read our comment Policy to know your rights & responsibilities before actually leaving a comment for this article.

Related Posts Plugin for WordPress, Blogger...