Saturday, September 20, 2008

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>

0 comments:

Post a Comment

Popular Posts