Using CSS background-image on HTML img Elementts

Embedding images as background-images, and combined with animated images to get the most out of your images

HTML

<div>
            <img src="an-runner.gif" alt="runner">
        </div>




<cite><a href="http://web.archive.org/web/20101113160146/http://www.contentwithstyle.co.uk/resources/img_bg_demo/index.html">via an old content with style demo that is down atm</a></cite>

CSS

div {
    background: url('/web/20101113160146im_/http://www.contentwithstyle.co.uk/resources/img_bg_demo/blur.jpg') no-repeat scroll left top transparent;
    width: 232px;
    height: 200px;
}


img {
    
    background: url('/web/20101113160146im_/http://www.contentwithstyle.co.uk/resources/img_bg_demo/parallax.gif') no-repeat scroll left bottom transparent;
    padding: 93px 100px 75px;
}