how do I make an image fit inside a button in css? - html

Question

I created two buttons on my site that I plan to turn them into images when you hover over them. The problem that I ran into is that after hovering, the image does not quite fit inside the box (it is too big). How do I resize it so that it properly fits inside the box upon hovering over them?
Here is the HTML:
<a href="link.html">
<div class="main-button">
<h2 class="main-text">Maintenance</h2>
</div></a>
<a href="link2.html">
<div class="docs-button">
<h4 class="docs-text">Other Documents</h4>
</div></a>
and the CSS:
.main-button {
width: 230px;
height: 230px;
border: 5px solid white;
overflow: hidden;
background: #0099DF;
margin-left:100px;
float:left;
}
.main-text {
font-size: 24px;
color:#FFFFFF;
top: 110px;
height: 80px;
width: 170px;
margin-left:40px;
margin-top:150px;
}
.docs-button {
width: 230px;
height: 230px;
border: 5px solid white;
overflow: hidden;
background: #545454;
margin-right:100px;
position:fixed;
right:30%;
float:center;
}
.docs-text {
font-size: 24px;
color:#FFFFFF;
top: 110px;
height: 80px;
width: 170px;
margin-left:60px;
margin-top:120px;
}
.main-button:hover {
background-image:url('../images/settings.png');
}
.docs-button:hover {
background-image:url('../images/documents.png');
}

Answer 1

Try background-size:cover - e.g.
.main-button:hover {
background-image:url('http://placekitten.com/200/300');
background-size:cover;
}
.docs-button:hover {
background-image:url('http://placekitten.com/g/200/300');
background-size:cover;
}

Answer 2

background-size:contain if you want to see all image, or 100% 100% to take 100% width and 100% height but in this case your image could be shell

Answer 3

Hello TheOrangeRemix,
I have a viable solution to you problem. My first step would be to look at the properties of you image and get the dimensions e.g. 100x100, 255x100, etc.
From here you will want to convert that ratio into a percentage. This is a tool I often use when calculating ratio percentages: Ratio to Percentage Calculator
Once you have your percentage (I'm going to use 1:2, which gives me the percentage of 50%). You want to create an anchor tag (<a>) and give it some styles:
(Note: this may be slightly overengineered but it does what you want it to.)
html, body {
width: 100%;
height: 100%;
background: #000;
margin: 0;
}
.wrapper {
height: 100%;
width: 100%;
max-width: 400px;
margin: 0 auto;
background: #fff;
}
.mainButton {
display: inline-block;
padding-top: 50%;
width: 100%;
background: url('https://via.placeholder.com/100x50');
background-size: 100% 100%;
position: relative;
}
.mainButton .text {
font-size: 22px;
color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="wrapper">
<a href="/somewhere/something" class="mainButton">
<span class="text">
Hello, I am a button.
</span>
</a>
</div>