How to make background image shrink proportionally to fit button size in javascript?

Question

I am making a chessboard in javascript. The chessboard\'s squares (buttons) were originally designed to be 60px by 60px, but now they are 40px by 40px.

Answer 1

Most modern browsers have support for CSS background-image options like background-size, so you may really use something like this:

button{
  width:40px; 
  height:40px; 
  border: 0;
  background-size: 100%; /* To fill the dimensions of container (button), or */
  background-size: 40px auto; /* to specify dimensions explicitly */
}

Of course you can use that in JavaScript too (but it's better to add it to already existing CSS for button):

square.style.backgroundSize = '100%';