padding in background image aligned to the right

You can cut that image in photoshop as per how much space you want in your design

To make it consistent as 18px padding from the right side you can use calc.

background-position-x: calc(100% - 18px);

You could use the ":after"-psuedo class. That also makes your icon show up if a user prints the page. I made you an example.

Without any changes in html, and only a little change in css you can accomplish that .Try this css - I just change the position of the warning icon.

background:#F2EEBB url(Images/warning_triangle.gif) no-repeat 99.5% center;

<div class="warning">
    <span>text text text</span>
</div>


.warning
{
    background:#F2EEBB url(Images/warning_triangle.gif) no-repeat 99.5% center; 
    border:solid 1px red;
    margin:5px;
    color:#000000;
    font-weight:bold;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:3px;
    padding-right:18px;
}