Reducing the size of the button cuts the image instead of reducing the size

advertisements

I have a table with 2 columns: on the right one threre's some text and on the left one there's a button with image in it (some blue gradient) and a text. The image is in css file (it have to be this way).

When I change the width or height of the button (percentage) it doesn't reduce the image size but cutting it.

How can I make it reduce the size of the image?

Html:
<table>
    <tr>
        <td>
            hello hello
        </td>
    </tr>
    <tr>
        <td class="address">
            My name is<br>
            Inigo Montoya
        </td>
        <td style="width: 35%;">
            <button class="button-background" type="button">
                update</button>
        </td>
    </tr>
</table>

css:
    button.button-background
    {
        width: 100%;
        height: 100%;
        background: url('data:image/png;base64,iVBORw0g==');
        background-position: center;
        background-repeat: no-repeat;
        border: transparent;
        color: white;
    }


you need to make the image responsive so that it will fit inside the div/td width. For an image to be responsive add a class to image.

.image-responsive{
    max-width:100%;
    display:block;
}