Sometime earlier I showed how you can use background images to create cool effects on your website. Recently, I read a nice trick of using background images on images to create cool animations.
You already know that we can set a background image on any element of a website, and under texts. Using the same technique, we can set a background image under an image. Look at the following example. These are two separate GIF animations.
Now by setting the landscape GIF as a background to the running leopard, we get this.
Cool isn’t it?
Here is the code:
<div style="width:206px;height:100px; background:url(/landscape.gif)"><img style="padding-top:10px;padding-left:10px" src="/tiger.gif"></div>
Be the first to comment