title: how do I make an image fit inside a button in css?
body: <p>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?</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;a href="link.html"&gt;
  &lt;div class="main-button"&gt;
  &lt;h2 class="main-text"&gt;Maintenance&lt;/h2&gt;  
  &lt;/div&gt;&lt;/a&gt;
  
  
  &lt;a href="link2.html"&gt;
  &lt;div class="docs-button"&gt;   
  &lt;h4 class="docs-text"&gt;Other Documents&lt;/h4&gt;  
  &lt;/div&gt;&lt;/a&gt;
  </code></pre>
  
  <p>and the CSS:</p>
  
  <pre><code>.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');
  }
  </code></pre>