How to use a background image on an image

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

Leave a Reply

Your email address will not be published. Required fields are marked *