Different backgrounds in each post!

A background put in your blog serves as a sort of branding for your blog. For example if it is a travel blog a background picture of the Eiffel Tower can serve very well. You can also have transparent backgrounds in your blog over which the blog text scrolls.



What if your blog posts are on different topics? Then you can put a different picture as the background for each post.......

SOURCE THE PICTURE

First step is to search for an appropriate picture for your post. Use Google to search for copyright free images.

UPLOAD PICTURE TO FREE HOSTING

Next step is to upload the picture to a free web host and copy down the link. You can use Googlepages or Photobucket.com for this.

PUT CODE IN POST TEMPLATE

1. Login at Blogger.com.

2. Click on Settings link on the Dashboard.

3. Click on the Formatting subtab of the Settings tab.

4. Scroll down in the Formatting tab to the Post Template at the bottom.

5. Paste this code at the top of the box :

<div style="background:url(LINK_OF_PICTURE) no-repeat;">

and paste this code at the bottom of the box :

</div>

6. Save Settings.

7. Click on Posting tab at the top.

8. The Post Editor will open with the code already in it.

9. Replace 'LINK_OF_PICTURE' with actual link of the picture uploaded to your free host. If you do not want the picture to repeat delete the "no-repeat" in the code line.

Type in your post before the </div> tag at the bottom, give it a Title and Publish.


See the example in this post.

Enjoy!!

Transparent Background for Blogs.

You can put a picture as a background for your blog. After doing that you can make your blog transparent so that the picture shows through it.........

PICTURE BACKGROUND FOR BLOGS

The first step is to find or create the picture you wish to put up as the background. You can create a small picture in any graphics program. It should be small ( around 96x96 pixels would do) and 'tileable'. This means that it should repeat itself without any borders across your web page. To source such graphics from the Internet just do a Google search for 'graphic backgrounds'.



After finding the picture save it to your hard disk (make sure of any copyright conditions). Then upload the picture to Photobucket or Googlepages and copy down he link of the picture.



To put it as the background in your blog login at Blogger.com and click on Layout link on Dashboard. Then click on Edit Html subtab of Template tab. The picture has to cover the whole body of the blog so scroll down to this code in the CSS part of the template :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

The CSS part of the template is the code which lies between <b:skin><![CDATA[ and ]]></b:skin> tags.



To the above code add these lines :

background-repeat: repeat;
background-image: url(LINK OF PICTURE);
background-attachment:fixed;

so it looks like this :

body {
background:$bgcolor;
background-image: url(LINK OF PICTURE);
background-attachment:fixed;
background-repeat: repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Replace 'URL OF PICTURE' with the link to your picture. The background-image line shows the location of the picture where you have uploaded it at Photobucket or Googlepages. The background-attachment line fixes the picture so that it does not scroll with the page. The background-repeat line tiles the picture vertically and horizontally if you give it a repeat parameter.


Click Preview and then Save Template. Clear cache and view Blog. Now that your background is ready it is time to make your blog transparent.

TRANSPARENT BACKGROUND FOR BLOGS

To create the transparent background I have used code from Mandarin Designs. To add this code login at Blogger.com and click on Layout link on Dashboard. Then click n Edit Html subtab of Template tab and scroll down to the part of the blog code which you wish to make transparent. To make the followng background transparent :




apply the code change to :

outer-wrapper

code. To apply it to the blog posts only, change the :

main-wrapper

code. This is what it looks like after applying it to posts section :



To apply it to the sidebar change the code in the :

sidebar-wrapper

section in the CSS part of the template. Similarly to apply it to the header or footer change the code in the :

header-wrapper

footer-wrapper

sections.

NOTE : The sections in your blog may have different names depending on the template. Add the code to a section and click on Preview button to see what parts of the blog become transparent.

This is the code to apply :

background-color: silver;
opacity:.850;
filter: alpha(opacity=85);
-moz-opacity: 0.850;

After applying it to the outer-wrapper it will look like this :

#outer-wrapper {
background-color: silver;
opacity:.85;
filter: alpha(opacity=85);
-moz-opacity: 0.85;
width: 1024px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

You can change 'silver' to any other colour like 'blue', 'red' to see the effect with that color. This what it looks like with a red filter applied to the outer-wrapper :




Also experiment by changing '0.85' (opacity and moz-opacity) and '85' in filter: alpha(opacity=85) to any number between 0 to 1 in the first and 1 to 100 in the second to vary the transparency or opacity.


This is what it looks like in the demo blog outer-wrapper :



You can see the above code effect in this demo blog. I have given a white color to the various sections and the rest of the blog looks like a transparent skin sliding over a fixed wall (background).


Have Fun!

How To Add Picture to Background.

To add a Picture to the background of your blog...............

Step 1. FIRST create a free account at Googlepages (http://pages.google.com) to host your image/picture. In the Page Manager go to bottom frame of sidebar and click on Upload. Browse to your file on PC and click Open to upload it to your Google Page Account. At the present they offer 100 MB free disk space. Right click on the uploaded file and choose Copy Link Location. This copies the URL of the picture you have uploaded.


Step 2. Login to the Dashboard. Click on Layout under name of blog you want to add picture to. Click on Edit Html tab next to Page Elements tab. This opens the Edit Template page.


Step 3. First backup your whole template using methods described in How to Change Template.

FOR SAFE BLOGGING. Use Download full template link in edit Html subtab of Template tab.

Step 4. Then scroll down in Edit Template text box till you come to :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

This is part of the code CSS (Cascading Style Sheet) described in Parts of the Template. This describes the whole background of your blog. To add an image here you have to add the following code before the '}' at the end :

background-image:url(WEB URL OF YOUR PICTURE );
background-repeat:no-repeat;
background-position:120% 10%;
background-attachment: scroll;

SO THAT IT LOOKS LIKE THIS :

body {
background:$bgcolor;
background-image:url(WEB URL OF YOUR PICTURE);
background-repeat:no-repeat;
background-position:120% 10%;
background-attachment: scroll;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Instead of "WEB URL OF YOUR PICTURE" copy paste the URL of your picture at Google Pages from Step 1. The third line describes the position of the image. The first figure (120%) controls horizontal placement. The second, vertical (10%). Negative percentages will move the image up or to the left, in relation to the containing element. The repeat attribute controls tiling. If instead of 'no-repeat' you add 'repeat-x' itwill tile horizontally and 'repeat-y' will tile it vertically. The scroll attribute means your picture moves along with the textwhen you scroll up or down. If you want the picture to remain fixed while your text scrolls past it or over it when you use it as a background then change 'scroll' to 'fixed'


Save Template. Refresh Cache. View blog.



TO MAKE A CLICKABLE IMAGE BACKGROUND ON YOUR BLOG

First locate the image and upload it to a free hosting account like Google Pages. Copy the URL of your image and keep.

Then create a division to hold the image on your web page. This is done by pasting the following code in your CSS :

#imageholder {
float:right;
}

This positions the image in the upper right hand corner of your blog.

The Clickable Image is rendered by pasting the following code after the <body> tags :

<div id="imageholder">
<P><A title="TITLE OF YOUR BLOG" href="URL OF YOUR BLOG"><IMG border="0" src="GOOGLEPAGES URL OF IMAGE" alt="ALT. TITLE FOR TEXT BROWSERS AND SEARCH ENGINES" ></A></P>
</div>

In HTML the <img> tag has no end tag.

In XHTML the <img> tag must be properly closed.

Save Template

Technorati Tags:background, css, picture, template