How to add background images automatically to blog posts

Background-Image
Blog template is a main aspect for increasing or decreasing traffic of your blog.If you intend to maintain your blog as a part time job or full time job,you should know how to change template preferences.I don't tell you that you can't do anything without having knowledge to customize blogger template.But having basic knowledge about template editor and your current template,you have confidence about your blogging career.Because,you're not beware of customizing template preferences,widget settings,layout settings etc.


We can control almost all settings of template,blog post settings,widget settings,static page preferences as on.I thought to bring you different trick for your blog.If you want to display special image in every post with home page,this tutorial will help you.

Step 1:Sign in to your blogger account.
Step 2: Go to Template and backup your template.
Step 3: Now click on Edit HTML button.Find .post-body code in skin tags using Ctrl+F.You'll see a block of code like below in default blogger templates.


.post-body {
  font-size: 110%;
  line-height: 1.4;
  position: relative;

Step 4: Remove above code and replace below code.If you use custom blogger templates,just paste below code right above of ]]></b:skin> code.

.post-body {
background:url(Image-adress.jpg)no-repeat top right;
font-size: 110%;
line-height: 1.4;
position: relative;

Customizations

- Replace Image-adress.jpg with your image's address.
- If you want to repeat the image in horizontally,replace no-repeat with repeat-x or you want to repeat the image in vertically replace no-repeat with repeat-y.Type repeat code in above code,if you prefer to repeat the image in whole page(post).
- You can set the image displaying position as in green color codes.

Background-Positions

If you want to add multiple images in blog posts,you will follow this step. 

.post-body {
background:url(Image1-url)no-repeat top right,url(image2-url)no-repeat top left,url(image3-url)no-repeat top left;
margin-right:220px;
font-size: 110%;
line-height: 1.4;
position: relative;
}

Step 5: After making customizations,do most important matter, save your Template.

Author's desk

Following these steps you can make your blog posts more attractive like adding images in the bottom of blog posts.I recommend you to don't add many images and don't use large images as background image.It will increase loading time of your blog.If you want to add a large image into blog posts,resize image(minimize the image size) and repeat the image.If you have any questions related to adding background images automatically to blog posts,ask me anything in below.
Previous
Next Post »