Apply a background image to an image

By alex|CSS|Be the first to comment!

this is quite a neat trick, and it can look really good depending on your design and the image you put as background...

To get it to work all you need is to apply a padding and display:block; to the image. So the CSS would be:

 
img{
	display:block;
	padding:10px;
	background-image:url(image.gif);
}
 

Here is a very smart use of this technique, where a div contains the sky, the image is a little man running, with an animated background that simulates motion.

Read the post that explains how that was achieved if you have any doubts.

Enjoy,