March 12, 2012
padding in background image aligned to the right
Question by Naor
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 by Dinesh Swami
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;
}
