how to do the fit image size in background image

[koyanpaing]

Hello everyone,
I would like to know how to fit the limited size in background image of div tag.
My code is

<style>
 #gallery_image{
    width:156px; 
    height:156px; 
    float:left;
    background-color:#a7a9ac;
    border:solid 2px #D1D3D4;
    margin:0 15px 15px 0;
    padding:0;
 
</style>
 
<div id="gallery_image" style="background-image: url(<%=imgSymlink+portfolioFile.getPath() %>) ">
    <div id="gallery_image_top">
                <div style="float:left;"><img src="<%=imageIconImage%>" width="16" height="16" style="border:0;" /></div>
 

The image is showing only x=0,y=0, width=156 height=156 of the original image.
I want to fit the whole image in width=156 and height 156 of the div tag.
You can see the example of sunflower image file.
Thanks and Regards,
Yan Paing

[Dormilich]

you can accomplish that by using the background module of CSS3, however, be aware that this is not supported by every browser.

background tricks with CSS3