CODEWITHSUNDEEP
htmlcssbackground-imagebackground-position
russellelbert
russellelbert

Reputation: 723

Use CSS to overlay image on gradient with padding

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?

Upvotes: 3

Views: 2181

Answers (2)

Daut
Daut

Reputation: 2625

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>

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78520

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>

Upvotes: 6

Related Questions