Question: I want to create a headline (h2) with an image at the right-most area of the bounding box. I have the layout almost right except I can't push the image a little bit to the right of the element's bounding box -- how would I tweak my css so it is displayed correctly?

I'm trying to do something like this:

```
[{someHeadLineText}{dynamic space            }{image}{5px space}]

```

where the [] indicate the total available width of my content.

Html:

```
<div class="primaryHeader">             
  <h2>News</h2>             
</div>

```

Css:

```
.primaryHeader h2 {
   background-color: green; /* the header looks like a box */
   color: black;    
   background: transparent url(../images/edit.png) no-repeat right center;
   border: 1px solid red;
}

```

I am placing the image to the right of my h2 element and centered vertically -- but how do I adjust the placement of the background image?

Answer: 
I'm afraid I think you can't. You can use either `right` or a pixel value as the image's x-position but that pixel value will always be relative to the *left* corner of the bounding box. Adding padding won't help either, it will just extend the bounding box further.

The only solution I know for this is either adding the shift to the image itself, or using an absolutely positioned element (with a slight offset) hovering behind the element - but that would require you know the width and height in advance.

**Edit:** evil, hacky idea. I have no time to try this out right now, but it should work if the `h2` is a display: block. 

Give the `h2` a `position: relative`.

Place a `div` or other element inside the `h2` with the following:

```
position: absolute;
left: 0px;
top: 0px;
right: 5px; /* This is the shift */
bottom: 0px;
background-image: url(...);
background-position: right center;
background-repeat: no-repeat;
z-index: -1;  /* I don't know whether this will overwrite the h2's content */

```

this could lead to the desired effect, I'm not sure as I have not tried.
The element may overlay the `h2`'s other content, in which case you would have to put the rest into a `<span>` element with `position: relative` and `z-index: 1`.

It's really hacky. Better put the padding into the image itself, much cleaner.
Can you add padding pixels in the image itself?