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:
HTML:
<ul>
<li>Hello</li>
<li>Hello world</li>
</ul>
CSS:
ul{
width:100px;
}
ul li{
border:1px solid orange;
background: url("arrow1.gif") no-repeat center right;
}
ul li:hover{
background:yellow url("arrow1.gif") no-repeat center right;
}
I know we can set the image position by pixels, but since each of the li has different width, I can't do that.
Here's JSFiddle link: http://jsfiddle.net/QeGAd/1/
Use background-position: calc(100% - 20px) center
, For pixel perfection calc()
is the best solution.
ul {_x000D_
width: 100px;_x000D_
}_x000D_
ul li {_x000D_
border: 1px solid orange;_x000D_
background: url("http://placehold.it/30x15") no-repeat calc(100% - 10px) center;_x000D_
}_x000D_
ul li:hover {_x000D_
background-position: calc(100% - 20px) center;_x000D_
}
_x000D_
<ul>_x000D_
<li>Hello</li>_x000D_
<li>Hello world</li>_x000D_
</ul>
_x000D_
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.
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/
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
Use CSS background-clip:
background-clip: content-box;
The background will be painted within the content box.
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>
You can be more precise with CSS background-origin:
background-origin: content-box;
This will make image respect the padding of the box.
Source: Stackoverflow.com