title: Button with 100% of background image size
body: <p>I would like to have a button with 100% of an image's width and height without specifying the width and height on the button.</p>
  
  <p>eg: If I change the image, the button size should be changed dynamically as well according to the size of the image</p>
  
  <p>Note: The button size should be exactly the image size without stretching/distorting/enlarging/shrinking the image. If I change the image to 300px * 200px, the button size should be 300px * 200px as well.</p>
  
  <p>Is it possibly to be done with css alone?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#rock {
    width: 150px;
    height: 150px;
    background-image: url(https://i.imgur.com/CeJU3mO.png);
    background-repeat: no-repeat;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="rock"&gt;&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>