Question

I’m trying to have some padding around the background image which is position to the right in the element, the element also has a gradient background.

I’ve tried using background-origin to position the image, but that would shift the background gradient as well.

Here’s my example:

http://jsfiddle.net/th3Q6/

Note

• This only needs to work for Webkit based browsers.
• No additional wrapper around element.
• Element width is fluid.

Answer 1

This works…

a:after {
    display: block;
    content: '';
    width: 25px;
    height: 28px;
    margin: -5px -8px;
    float: right;
    background: url(http://i.min.us/jc808I.png) no-repeat;
}

jsFiddle.

It won’t work in older IEs, but you only want WebKit support, so you’re in luck. 🙂