title: Use CSS to overlay image on gradient with padding
body: <p>I'm attempting to create a button that contains a gradient covering the whole button, then with an image on just a portion of the button.</p>
  
  <p>(note: for ease of the question I've changed my code to a div, but the outcome remains the same)</p>
  
  <p>Initially this was successful doing such:</p>
  
  <pre><code>&lt;div class="myBtn_1"&gt;test button one&lt;/div&gt;
  
  .myBtn_1    
  { 
    border: solid 1px #ff00ff;
    background-image: url('https://picsum.photos/21?image=1080'), 
       linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1)); 
    background-repeat:   no-repeat;
    background-size:     auto 100%;
    width:               200px;
    height:              50px;
    padding-left:        65px; 
  }
  </code></pre>
  
  <p>the jfiddle representing this can be found: <a href="http://jsfiddle.net/5v6zgr2d/" rel="nofollow noreferrer">here</a></p>
  
  <p>HOWEVER I want some border around my image within the button/div, so I added <code>background-position 5px 5px</code> to the css, as well as explicitly setting the background-size (auto 40px). This does add padding to the image, but it also adds padding to the gradient.</p>
  
  <p>again, see the 2nd class in the same <a href="http://jsfiddle.net/5v6zgr2d/" rel="nofollow noreferrer">jfiddle</a></p>
  
  <p><strong>Question:</strong> how can I create a button/div in css that has a gradient covering the full background, then add an image that has padding around it?</p>