CODEWITHSUNDEEP
htmlcsspadding
user966582
user966582

Reputation: 3323

How can I pad a background image from the element edge?

I want to add a background image on the right side of the list items, and want to have some padding from the right side as well, but I'm unable to do that. Please have a look at following example:

I know we can set the image position by pixels, but since each of the li has different width, I can't do that.

ul {
  width: 100px;
}

ul li {
  border: 1px solid orange;
  background: url("https://via.placeholder.com/50") no-repeat center right;
}

ul li:hover {
  background: yellow url("https://via.placeholder.com/50") no-repeat center right;
}
<ul>
  <li>Hello</li>
  <li>Hello world</li>
</ul>

Upvotes: 97

Views: 189904

Answers (9)

Juan G. Hurtado
Juan G. Hurtado

Reputation: 2137

You can use percent values for the background-position property:

background: yellow url("arrow1.gif") no-repeat 95% 50%;

Not pixel perfect, but…

Upvotes: 59

Mo.
Mo.

Reputation: 27465

Use background-position: calc(100% - 20px) center, For pixel perfection calc() is the best solution.

ul {
  width: 100px;
}

ul li {
  border: 1px solid orange;
  background: url("https://placehold.co/200x125/e16d65/FFFFFF/png") no-repeat calc(100% - 10px) center;
}

ul li:hover {
  background-position: calc(100% - 20px) center;
}
<ul>
  <li>Hello</li>
  <li>Hello world</li>
</ul>

Upvotes: 11

Elyse Dawson
Elyse Dawson

Reputation: 166

Adding box-sizing: content-box seems to also work. Note that you may have to adjust the height, width, and background-size to account for padding with this method.

Upvotes: 0

Eduard Kolosovskyi
Eduard Kolosovskyi

Reputation: 1554

Use CSS background-clip:

background-clip: content-box;

The background will be painted within the content box.

Upvotes: 24

Mladen Janjetovic
Mladen Janjetovic

Reputation: 14634

You can be more precise with CSS background-origin:

background-origin: content-box;

This will make image respect the padding of the box.

Upvotes: 246

Volodymyr Khmil
Volodymyr Khmil

Reputation: 1244

You can just add the padding to tour block element and add background-origin style like so:

.block {
  position: relative;
  display: inline-block;
  padding: 10px 12px;
  border:1px solid #e5e5e5;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-origin: content-box;
  background-image: url(_your_image_);
  height: 14rem;
  width: 10rem;
}

You can check several https://www.w3schools.com/cssref/css3_pr_background-origin.asp

Upvotes: 3

Shailender Arora
Shailender Arora

Reputation: 7778

You can achieve your results with two methods:-

First Method define position values:-

HTML

 <ul>
 <li>Hello</li>
 <li>Hello world</li>
 </ul>

CSS

    ul{
    width:100px;    
}

ul li{
    border:1px solid orange;
    background: url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat 90% 5px;
}


ul li:hover{
    background: yellow url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat 90% 5px;
}

First Demo:- http://jsfiddle.net/QeGAd/18/

Second Method by CSS :before:after Selectors

HTML

<ul>
<li>Hello</li>
<li>Hello world</li>

CSS

    ul{
    width:100px;    
}

ul li{
    border:1px solid orange;
}

ul li:after {
    content: " ";
    padding-right: 16px;
    background: url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat center right;
}

ul li:hover {
    background:yellow;
}

ul li:hover:after {
    content: " ";
    padding-right: 16px;
    background: url("http://www.adaweb.net/Portals/0/Images/arrow1.gif") no-repeat center right;
}

Second Demo:- http://jsfiddle.net/QeGAd/17/

Upvotes: 4

hjindal
hjindal

Reputation: 616

setting direction CSS property to rtl should work with you. I guess it isn't supported on IE6.

e.g 

<ul style="direction:rtl;">
<li> item </li>
<li> item </li>
</ul>

Upvotes: -1

Dennis Jamin
Dennis Jamin

Reputation: 386

The only option to actuall have this made pixel perfect is to create some transparent padding within the GIF itself. That way you can actually align it to the right of the LI and still have the background padding you are looking for.

Upvotes: 1

Related Questions