CSS Background image and padding

Question

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    lt ul gt       lt li gt Hello lt  li gt       lt li gt Hello world lt  li gt   lt  ul gt    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

User · Answer

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

User · Answer

You can achieve your results with two methods -  First Method define position values -   HTML    lt ul gt    lt li gt Hello lt  li gt    lt li gt Hello world lt  li gt    lt  ul gt    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   lt ul gt   lt li gt Hello lt  li gt   lt li gt Hello world lt  li gt      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

User · Answer

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

User · Answer

setting direction CSS property to rtl should work with you  I guess it isn t supported on IE6   e g    lt ul style  direction rtl   gt   lt li gt  item  lt  li gt   lt li gt  item  lt  li gt   lt  ul gt

User · Answer

Use background-position  calc 100  - 20px  center  For pixel perfection calc   is the best solution    x000D   x000D  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   lt ul gt  x000D     lt li gt Hello lt  li gt  x000D     lt li gt Hello world lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

You can be more precise with CSS background-origin  background-origin  content-box   This will make image respect the padding of the box

User · Answer

Use CSS background-clip  background-clip  content-box   The background will be painted within the content box

User · Answer

You can use percent values   background  yellow url  arrow1 gif   no-repeat 95  50     Not pixel perfect  but

[html] CSS: Background image and padding

Examples related to html

Examples related to css

Examples related to padding