Question

I have the following code . The problem is that I am not succeeding in making the button size equal to the background image size. The size of the background image is 60×60 pixels. How should I code this?

  <tr>
                <td><button style="width: 60px; height: 60px;"><img src="darkSquare.jpg" /></button></td>
                <td><button style="width: 60px; height: 60px;"><img src="lightSquare.jpg" /></button></td>
                <td><button><img src="darkSquare.jpg" /></button></td>
                <td><button><img src="lightSquare.jpg" /></button></td>
                <td><button><img src="darkSquare.jpg" /></button></td>
                <td><button><img src="lightSquare.jpg" /></button></td>
                <td><button><img src="darkSquare.jpg" /></button></td>
                <td><button><img src="lightSquare.jpg" /></button></td>
            </tr>
            <tr>
                <td><button><img src="darkSquare.jpg" /></button></td>
                <td><button><img src="lightSquare.jpg" /></button></td>
                <td><button><img src="darkSquare.jpg" /></button></td>
                <td><button><img src="lightSquare.jpg" /></button></td>
                <td><button><img src="darkSquare.jpg" /></button></td>
                <td><button><img src="lightSquare.jpg" /></button></td>
                <td><button><img src="darkSquare.jpg" /></button></td>
                <td><button><img src="lightSquare.jpg" /></button></td>
            </tr>

I am getting the following output-

Answer 1

Try, in CSS,

button {
  background-image:url('www.example.com/image.jpg');
  width:50px; /* or whatever */
  height:30px; /* or whatever */
}

That should do it, for all buttons.