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/

use white solidd border – Vishesh Mangla Sep 01 '21 at 21:18 — Vishesh Mangla, Sep 01 '21 at 21:18

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

202

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

94,893
84
350
433

answered Aug 31 '15 at 11:14

Mladen Janjetovic

12,489
8
70
80

10

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

@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. - – Ali 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 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 56 · Accepted Answer · answered Apr 17 '12 at 09:08

56

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

2,019
16
25

17

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

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

16

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

94,893
84
350
433

answered Nov 22 '16 at 13:58

Ed Kolosovsky

1,098
10
17

4

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

Mo. · Answer 4 · 2022-03-01T11:08:42.153

6

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>

edited Mar 01 '22 at 11:08

answered Dec 13 '15 at 13:28

Mo.

23,921
35
145
210

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
2

@Steffan "The + and - operators must always be surrounded by whitespace", so `background-size: calc(100% - 10px) calc(100% - 20px)` https://stackoverflow.com/questions/30678942/does-calc-work-for-background-size-of-image-in-css/30679082#30679082 – rofrol Jan 17 '22 at 20:37

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

563
6
16

score 0 · Answer 9 · answered Aug 05 '21 at 16:56

0

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.

answered Aug 05 '21 at 16:56

Elyse Dawson

1
1

Could you provide a working code example? – zingi Aug 06 '21 at 08:27

CSS: Background image and padding

9 Answers9

Linked

Related