Add Moving Clouds In Background Blogger Using Jquery

Have a Look at This Image. Its wow? Isn't it? So this is a simple css and jquery trick which makes the background image move. if you'll see the Image is constant. it isnt a gif. its the jquery which make the background move

Did Amazed with pic? Check

Steps to Add this to your own Blog / site.

So Its Very Easy to Add this to you blog

• Visit Blogger > Dropdown menu > Template > Edit HTML
• Now Press Ctrl  + f and search for body{ [this is actually starting of your blogs body]
• And Replace the body{ with the code below

background:#c1deee url(http://i.imgur.com/JD8mWs7.png) repeat-x scroll top left;

• Now Your Background Will be seen :) But we need to move the Clouds . ie background image
• So Add the following code Above

</head>

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’ type=’text/javascript’/>

<script charset=’utf-8′ type=’text/javascript’>var scrollSpeed=70;var step=1;var current=0;var imageWidth=2247;var headerWidth=800;var restartPosition=-(imageWidth – headerWidth);function scrollBg(){current -=step;if (current==restartPosition){current=0;}$(&#39;body&#39;).css(&quot;background-position&quot;,current+&quot;px 0&quot;);}var init=setInterval(&quot;scrollBg()&quot;, scrollSpeed)</script>

• Yeah! Hi five your blog now have a animnated background. just remove code highlighted above if you have already included jquery and change speed as you Wish

Leave a Comment Below if any problem and thanks to the Developer :)