CSS Background Image in Top Right Hand Corner with Padding

Question

Without using percentages, is it possible to position a background image 2px from the top and 2px from the right of an element?

Answer 1

This is possible in CSS3, http://www.css3.info/preview/background-origin-and-background-clip/, prior to that you have to use nested elements.

<div style="padding:2px">
  <div style="background.....">
    <p>content...</p>
  </div>
</div>

Answer 2

AFAIK there isn't an easy way to do this with CSS. If the element width is fixed, position the image using a left offset. Otherwise add 2px transparency to the image and set it to top-right.

Answer 3

Change your image and add 2px of whitespace to the top and right of it. You should find that there are no cross browser compatibility issues!