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:

<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/

score 184 · Answer 1 · edited Jun 27 '20 at 21:02

184

You can be more precise with CSS background-origin:

background-origin: content-box;

This will make image respect the padding of the box.

edited Jun 27 '20 at 21:02

mikemaccana

81,787
73
317
396

answered Aug 31 '15 at 11:14

Mladen Janjetovic

11,254
8
64
74

7

In fact this is awesome!! Bingo. – Garavani Mar 05 '16 at 12:50
3

@user966582 is it possible that you change the correct answer to this one – Mladen Janjetovic Mar 03 '18 at 12:42
1

Amazing! You are awesome and CSS is fantastic! – Yash Gadhiya Dec 29 '18 at 17:28
1

you saved my Bootstrap modal from ruining my background images on my fixed-position jumbotron – Prid Jun 20 '19 at 17:32
Superb approach @MladenJanjetovic – Timothy Dalton Apr 23 '20 at 17:01
1

Doesn't this offset the top left of the background to inside the padding, but still go outside the padding in the bottom right? The `background-clip` answer seems better. – mikemaccana Jun 27 '20 at 21:06
You are a god. - – Click Upvote Jul 16 '20 at 08:09
that is the answer – Andre Elrico Sep 23 '20 at 14:43
This should be marked as the accepted answer – Gabriel Linassi Dec 09 '20 at 14:34
This is the correct answer – jpedrosous Jan 28 '21 at 16:29
This does not make the image respect the box padding on all 4 sides. It only repositions the image relative to the `background-position`. For example, if the padding is 5px and the image position is `center left`, this will move the image 5px from the left. It will not resize or crop the image by 5px on the top, bottom or right. – Jargs Mar 10 '21 at 19:11
@mikemaccana @Jargs you will need to combine both `background-origin` and `background-clip` in some cases where you want the background to be resized to fit the content-box but then _also_ cropped to fit the content-box as well. The first one does the resizing, while the second does the cropping. – ADTC Apr 11 '21 at 04:29

score 52 · Accepted Answer · answered Apr 17 '12 at 09:08

52

You can use percent values:

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

Not pixel perfect, but…

answered Apr 17 '12 at 09:08

Juan G. Hurtado

1,829
15
24

13

for anybody wondering: the css property is called `background-position`. – phil294 Sep 04 '17 at 02:23

score 12 · Answer 3 · edited Jun 27 '20 at 21:05

12

Use CSS background-clip:

background-clip: content-box;

The background will be painted within the content box.

edited Jun 27 '20 at 21:05

mikemaccana

81,787
73
317
396

answered Nov 22 '16 at 13:58

Ed Kolosovsky

818
9
16

3

it will 'crop' the image when using with things like `background-size: contain;` – Chun Mo Wong Aug 14 '19 at 01:37

score 5 · Answer 4 · answered Dec 13 '15 at 13:28

5

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("http://placehold.it/30x15") no-repeat calc(100% - 10px) center;
}
ul li:hover {
  background-position: calc(100% - 20px) center;
}

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

answered Dec 13 '15 at 13:28

Mo.

21,971
31
138
201

1

This is nice if you want custom padding for background. Ex.: `background-position: 5px 10px; background-size: calc(100%-10px) calc(100%-20px);` – Steffan Dec 13 '17 at 12:23

score 4 · Answer 5 · answered Apr 17 '12 at 10:07

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/

score 2 · Answer 6 · answered Apr 17 '12 at 09:30

2

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.

answered Apr 17 '12 at 09:30

Dennis Jamin

398
1
10

score 2 · Answer 7 · answered Jun 14 '19 at 12:48

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

score 0 · Answer 8 · answered Apr 17 '12 at 09:33

0

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>

answered Apr 17 '12 at 09:33

hjindal

545
6
16

CSS: Background image and padding

8 Answers8

Linked

Related