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


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?

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

        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.