Update: The code works fine but it also disturbs while in the Dashboard>> Template so it is not good for use.

Those who like rain as much as a good cup of coffee. And since I like it too so today I will teach you to add rainfall using Javascipt to your blog. This code is made by GiFFY but I added soft rain sound to it so it is optional.

body {
background-image: url(URL of Image), url(URL of Image);
}

body {
background-image: url(URL of Image), url(URL of Image);
background-position: left top, right bottom;
}

 Here we have the first image that will fit on the upper left side, and the second in the lower right.
, we can also specify whether or not the images are repeated.

body {
background-image: url(URL of Image), url(URL of Image);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}

 If you also want to add a background color we can do it using background-color .

body {
background-color: #ccc;
background-image: url(URL of Image), url(URL of Image);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}

 You can see an example of the DIV is then like a single image but the reality is that we use a background color, then a picture up, and another image below.



This is the full code I used for the previous example.

CSS

#doublebackground {
background-color: #f2f2f2;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJr8yhW01OovHFQTskS1NVC5yl3RZJS4jBnv0eKuyDG4fa7oL4vnJO6T7QbmyPr7cvO7m3V_P_aiGYtUHJPHMNPRAeuUgLI2_JCiu5XQ7Wzlmg8rBpFogeEthlSnMZrCNbgSC35z5Ri9gN/s450/fondo1.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXzll5iyptLmbt52cmKlmn49b2pj-YJ2FjEhECogyrJCtul7r2CRKJvFw1E5ACwCiulMB56ny6dyXIyJj9G8dKX3pZVK_JcVVw2H6DTLwECJd8nzfg5B2YK8Wsr-4PKxSxaCykkAM6C5f4/s450/fondo2.png);
background-repeat: no-repeat, no-repeat;
background-position: left top, right bottom;
width: 450px;
height: 390px;
position: relative;
margin: 0 auto;
}
#doublebackground h2 {
position: absolute;
top:40%;
left: 20%;
color: #fc5669;
}

HTML

<div id="doublebackground">
<h2>Multiple Backgrounds Using CSS</h2>
</div>

But the number of images is not a limited since we can use three or more and give each a different property. As in the following example DIV, add three images of background, each has a different position, and the third will be repeated horizontally.



This is the complete code.

CSS

#doublebackground {
background-color: #C5E0DC;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4C8OfsAwFQVz1-XIGlrpYF61JIBZnWfBzDwRyytItVtv2qN-fnJhJDRia0klOLFscSLJSBmsO71B3xuWYQfh64WiW6qu-gso6aDly5lnr9jxvT5xwe2cE3xBXOSMzYcywo5yZtcvrArKo/s116/fondo1.jpg), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmfzQWz14pTY8PX-D2qDBD6YeQhNic_E5CWl3aqP_1uZjcRTRAFK9sgy3s1QyuuBEdRiheKEYYif1vZAV6bYTBf9EHQo1Rxw9CQpviWZ7CqIT29FkkqV_sJ0hYh4LYmdCpdcIf7SFd30NY/s116/fondo2.jpg), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv7o6m2NAMWIjDy2SifTuizHsXspbXUh2hGtwlu2XwiWV9SCoddJ8P9irmRNcPPoh0Fua3U9ovKJwZoptG0p4rp1oK3kWPldlYRCWBFtPOCghJw0P9xdqd1oNAa5qxzimCXhA7WH5nkmFl/s116/fondo3.jpg);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: right top, center center, left bottom;
width: 349px;
height: 300px;
position: relative;
margin: 0 auto;
}

HTML

<div id="doublebackground">
</div>

As you can see, adding more than one background image to the blog template a very simple thing. Always remember to separate them with a comma and images properties, except the last, that does not carry comma, only semicolon. For Internet Explorer it works for version 9 onwards so almost everyone will see it correctly working.

Thanks Everyone
DoNe.

The navigation links are those that appear at the bottom of the page that says "Older Posts", "Newer Posts" and "Home" and help us to move through the blog posts. This tutorial will show you how to change the word "Older Posts" and "Newer Posts" for post titles and make these to appear in a box "fading" when you scroll down the page.

Blogger released its official contact form but it has just only HTML so today  i will show you how you can add 10 different customized blogger contact form to blogger.