Different Background Image On Each Blog Post

I want to explain how to display a different background image on a blog post. Quite simple way, using HTML and CSS without JavaScript. Theoretically, using the background replaced with span width of 100% DAB height of 100%, the span was placed in a position below content (lower z-index). For more convenience, copy & paste the HTML code below and put in the post.


<div style="position: fixed; top: 0pt; left: 0pt; width: 100%; height:100%; background: url(http://your-URL/background.jpg); text-align: center; z-index: -5;">
</div>


Change http://your-URL/background.jpg address with the desired picture.If you do not want to use a photo as background, can also use the color.

Important!
The way the above is purely a trick that I have successfully applied in this blog. So far, these tricks can work well when combined with JavaScript readmore (because the script is turn off the HTML of each post on the main page). If you try this trick without combining it with the readmore script, likely the effect will disrupt the main page.

Advice :
Put the HTML code at the end of the post.

This trick can be run on the latest browsers. I've tested it in Firefox 3.x, Safari 4, Chrome 3, and Opera 9. However, can not walk well for IE 6.
For the demo, can be seen on this blog.
Good luck ..

RELATED POST :

Widget by BLOG SulthanYusuf ™