Q:

How to enlarge an image horizontally in css?

I have a <td> in a <table>, where I have an image in it. When the screen is re-sized using ctrl+mousewheel, the image has to be enlarged horizontally to fit the screen. I should not use 
background:repeat-x property and the width should be 15%; if I re-size, it should be enlarged horizontally.
html:
<td id="rightBanner">

css:
#rightBanner{
    background-image:url('../images/rightbanner.png');
    width:15%;
    height:95px;
    align:right;
}

Thankyou.

A:

you could do it this way:

setup width on container table,
setup "display: block" on the td
setup "background-size: 100% 100%" for the image

Here is the code:
CSS:
#container-table{
    width:100%;
}

#rightBanner{
   display:block;
   background-image:url('../images/rightbanner.png');
   background-size: 100% 100%;
   width:15%;
   height:95px;
}

HTML:
<table id="container-table">
    <tr>
        <td id="rightBanner"></td>
    </tr>
</table>

Here is a working example.
Hope this helps.

