A ticker is basically shows the important news and entries but in our case we will be using this ticker to show the latest posts in a nice metro design attracting the visitors attention while they are watching a old post of your this will help them to find more recent and awesome posts.

DEMO

Code

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.

Hi guys this is the second post i post in one day and got the second version of search box you cant see properly what is the effect so there is a live demo below.

Hi guys i got a new version for  a metro style menu this is the 4th version we release and in this version the menu is responsive.

Hi guys today i have an awesome CSS which will convert the blogger official contact  form to metro style as you can see on      ⇜ the image left side.

Hi guys,Again after releasing the first version of metro style recent comments today i release the second version it is not very metro styled but it is some so that is why it is the second version of the metro style recent comments.

This tutorial will help you to add social media icons in the top right corner of the page which could increases the likelihood that readers can follow through the various social networks.  so lets go to the tutorial.