padding in background image aligned to the right

Question

I have this html:

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

and this css:

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

This is the result:

The problem is that the background image that aligned to the right don't have padding between it and the border. How can I add a padding between the image and the border? (I cannot add elements to the div!)

Answer 1

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;
}

Answer 2

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.

Answer 3

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

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

Answer 4

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