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

Perhaps try adding position:relative and background-color:transparent to the button's style, then use a div inside the button tag setting the top and left to 0px. Inside this div please a tag for the button graphic with the style set to the new width/height (40px).

Might not need to use absolute position for the graphic if you don't want to put anything on top of it. If you do, use z-index on the div to move it behind any text, etc...

Give that a go. Hope it works! :D