How to set a image over another in the same <img> tag via CSS?
===

I have the strict need to set a big background under a little button icon in such a way:

    <img 
    src="little-icon.png"
    style="background: url('main-image.jpg') no-repeat center; 
    margin: auto; padding: 0; 
    height: 240px; width: 180px;" 
    />

Where height and width are the parameters of the (big) main background image. In a nutshell: I need to set img.src as a clickable icon, and its background-image as a big image. This is something quite simple to do with a div tag which wraps the img one. But I have, due to other circumstances, to do all in the same img tag.

The code right above does its job, but the icon is deformed to the size of the background one. Is there the chance to do what I need to do?