Use CSS to overlay image on gradient with padding

Question

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.

(note: for ease of the question I've changed my code to a div, but the outcome remains the same)

Initially this was successful doing such:

<div class="myBtn_1">test button one</div>

.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; 
}

the jfiddle representing this can be found: here

HOWEVER I want some border around my image within the button/div, so I added background-position 5px 5px 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.

again, see the 2nd class in the same jfiddle

Question: 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?

Answer 1

You can comma delineate the individual background properties too.

 .myBtn_3 { 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 40px, auto auto; width: 200px; height: 50px; padding-left: 65px; background-position: 5px 5px, 0 0; } 

 <div class="myBtn_3"> test button two </div> 

Answer 2

Why don't you use

position: absolute;

on the image and just put it inside the div

 .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; } .myBtn_2 { 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 40px; width: 200px; height: 50px; padding-left: 65px; background-position: 5px 5px; } .myBtn_3 { border: solid 1px #ff00ff; background-image: 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; position: relative; } .myBtn_3 img { position: absolute; left: 5px; top: 5px; height: calc(100% - 10px) } 

 <div class="myBtn_1">test button one</div> <br /> <div class="myBtn_2"> test button two </div> <br /> <div class="myBtn_3"> test button three <img src="https://picsum.photos/21?image=1080"> </div>