CODEWITHSUNDEEP
cssborderbackground-image
Elena Vesvina
Elena Vesvina

Reputation: 71

Increase space between border and background-image

I want to increase the distance between the border and the background-image ... I tried to add padding: 20px; but it doesn't work.

.Tab1 {
  background-image: url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
  width: 100px;
  height: 75px;
  display: block;
}
.Tab1:hover {
  border: 1px solid green;
}
<div class="Tab1"></div>

Upvotes: 3

Views: 2102

Answers (4)

web-tiki
web-tiki

Reputation: 103760

You can increase the space between the border and the background image with padding and background-clip:content-box; (see MDN for more info).

Also don't forget to center the background image with background-position:center;

.Tab1 {
    background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
    background-position:center;
    width:100px;
    height:73px;
    display:block;
    padding:20px;
    background-clip:content-box;
}
.Tab1:hover {
    border:1px solid green;
}
<div class="Tab1"></div>

If you also want to avoid the position snap on hover created by the border, you can add a transparent border and only change the colour on hover :

.Tab1 {
  background-image: url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-clip: content-box;
  width: 100px;
  height: 75px;
  display: block;
  padding: 50px;
  border: 1px solid transparent;
}
.Tab1:hover {
  border-color: green;
}
<div class="Tab1"></div>

Upvotes: 5

rth
rth

Reputation: 1

css code     
.Tab1 {   
   background:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
   background-position:center;
   background-repeat:no-repeat;
   width:100px;
   height:75px;
   display:block;
   padding:15px;
   }
   .Tab1:hover {   
   border:1px solid green;
   margin-left:-1px;
   margin-top:-1px;
   }

Upvotes: 0

jalak modi
jalak modi

Reputation: 56

You can check here the space between image and border...

.Tab1{background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
        width:100px;
        height:75px;
        display:block;
        padding:15px;
        background-repeat:no-repeat;
        background-position:center center;
        border:1px solid #fff;
    }
.Tab1:hover{border:1px solid green;}
<div class="Tab1">
    
    
</div>

thanks

Upvotes: 1

Martin
Martin

Reputation: 22760

.Tab1{background-image:url("http://dl.dg-site.com/wp-content/themes/aeron/images/dl-products-icons5.jpg");
    background-repeat:no-repeat;
    background-position:center;
 background-clip:content-box;
        width:100px;
        height:75px;
        display:block;
padding:20px;
}

.Tab1:hover{border:1px solid green;}

This is what you need, you first align the background to the centre of the box and then add a padding with the padding CSS, as you originally tried to do. The background-repeat property will stop the background repeating into the padding of the CSS.

Please also remember to add units to the padding value, just in case you had tried to do what you'd written as adding padding:20.

Upvotes: 2

Related Questions