How to Set Multiple Backgrounds To a Page?

We know that we can set background to a page using CSS easily. But, many don’t use the CSS background property to use multiple images to the same page. Previously we were achieving this using nested or multiple div elements. We can actually create a stacked background images for any webpage easily with this method. We may think adding multiple images would be something related to little bit of JavaScript and multiple div elements. Not really!!!

The best advantage of this feature is, we are going to just one div element to put all the images laid across the web page.
Sounds great?

Check out the demo in my demo page:

The simple CSS for this is:

#multiplebackground { 

background: url(Image-url1.jpg), url(Image-url2.jpg), url(Image-url3.jpg), url(Image-url4.jpg), url(Image-url5.jpg), url(Image-url6.jpg), url(Image-url7.jpg), url(Image-url8.jpg) ; 


background-repeat: no-repeat,no-repeat,repeat-y,no-repeat,no-repeat,no-repeat,no-repeat; 


background-position: 10px 190px, 140px 370px, right bottom, 190px 80px, 300px 200px, 150px 350px, 320px 150px;

}

HTML markup would be:

<div id="multiplebackground"></div>

As simple as that

Can this be implemented on Blogger?

body{ 

background: url(Image-url1.jpg), url(Image-url2.jpg), url(Image-url3.jpg), url(Image-url4.jpg), url(Image-url5.jpg), url(Image-url6.jpg), url(Image-url7.jpg), url(Image-url8.jpg) ;

background-repeat: no-repeat,no-repeat,repeat-y,no-repeat,no-repeat,no-repeat,no-repeat;

background-position: 10px 190px, 140px 370px, right bottom, 190px 80px, 300px 200px, 150px 350px, 320px 150px;

}

Hope you liked this tutorial. Thanks for checking it out. Catch you again with more interesting stuffs tomorrow.