html - CSS - 向 anchor 添加填充不是移动图像

Question

我现在卡住了，试图在我的 anchor 标签周围添加空间。当我添加内边距时，它只是使宽度变大，而背景图像保持不变。

我想做的是，当我向主页 anchor 标记添加填充时，主页图像会移动。

jsfiddle:http://jsfiddle.net/mwJUY/

html:

<ul id="navbar">
    <li><a id="homebutton" href=""><span>Home</span></a>
    </li>
    <li><a href="">Services</a>
    </li>
    <li><a href="">Resources</a>
    </li>
    <li><a href="">News</a>
    </li>
    <li><a href="">Clients</a>
    </li>
    <li><a href="">Association</a>
    </li>
    <li><a href="">Contact Us</a>
    </li>
</ul>

Answer 1

尝试使用 background-position 定位背景图片。

例子:

#homebutton {
background-position: center top;
}

第一个值是x坐标，第二个是y坐标。
您可以使用 px、em 或百分比。

编辑:

Updated fiddle