Placing an background image with padding in h2 tag

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 w开发者_JAVA百科idth 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?

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?

You could ditch the background image and use an image instead.

<div class="primaryHeader" style="padding-right: 5px;">  
  <img src="../images/edit.png" alt="" style="float: right;" />           
  <h2>News</h2>             
</div>

You can look into CSS3 background positioning. It works in all the modern browsers (not IE, of course).