Question

I have a div with a bg image background-position:bottom right -3px; That works perfectly in Firefox, however it breaks in IE and CHROME. How can I position my image in the DIV as desired in IE and CHROME?

Here are screenshots of IE and FIREFOX

FIREFOX^

IE^

CSS

.side_msg { font-size:16px; text-align:left; color:#EFEFEF; background-color:#7B9F31;     padding:30px; border-top:2px solid #FFF; border-left:2px solid #FFF;     border-right:2px solid #FFF; margin-right:-80px;
 background-image:url(../img/msg_bot.png); background-position:bottom right -3px       !important; background-repeat:no-repeat;  }
.side_msg_top { position:relative; right:-80px; bottom:-12px; min-height:58px;      background-image:url(../img/msg_top.png); background-position:right; background-repeat:no-repeat; }

Answer 1

The position can only be two coordinates, so:

background-position: right bottom;

Or:

background-position: right -3px;

Or:

background-position: -3px bottom;