CSS: Background image and padding

html css padding
user966582 picture user966582 · Apr 17, 2012 · Viewed 119.5k times · Source

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/

Answer

Mladen Janjetovic picture Mladen Janjetovic · Aug 31, 2015

You can be more precise with CSS background-origin:

background-origin: content-box;

This will make image respect the padding of the box.

Related questions

Why is there an unexplainable gap between these inline-block div elements?

I have two inline-block div elements, that are the same, positioned next to eachother. However there seems to be a mysterious space of 4 pixels between the two divs despite the margin being set to 0. There are no parent divs effecting …

Read More
Padding a table row

<html> <head> <title>Table Row Padding Issue</title> <style type="text/css"> tr { padding: 20px; } </style> </head> <body> <table> <tbody> &…

Read More
How do I prevent the padding property from changing width or height in CSS?

I am creating a site with DIVs. Everything's working out except when I create a DIV. I create them like this (example): newdiv { width: 200px; height: 60px; padding-left: 20px; text-align: left; } When I add the padding-left property, the width of …

Read More