Text and background image inside one div

Question

I have a div for the messages. It has an inner div with the text and corresponding icon (error, warning, etc).

<div id="outer">
  <div id="inner"><!-- contains the styles for background images (icon) -->
    message text (default)
  </div>
</div>

Also I have javascript (i cannot change js):

var field = getElementById("outer");
field.innerHTML = "message text (specific)";

This js removes div#inner.
If I make one div then I should shift background image so:

background-position: left 20px center;

Using px in background-position is CSS3 feature. And it doesn't work in CSS3-.
Not correct case (IE8)

Correct (Firefox, Chrome, etc)

How can I shift background image inside div without inner div? JS code (above) should work correctly (i cannot fix js).
UPDATE:
I wish that there was only one div (outer), and remove inner.

Answer 1

You could use a pseudo effect to achieve this:

jsfiddle

---

Since you may be using different images, you may be able to use this:

var field = getElementById("outer");
field.innerHTML = "message text (specific)";

#outer{
    width:200px;
    background:gray;
    border:5px solid black;
    position:relative;
    text-align:center;
    padding:20px;
}
#inner:after{
    content:"";
    height:20px;
    width:20px;
    position:absolute;
    left:10%;
  
}
.redClass:after{
      background:red;    
}
.blueClass:after{
      background:blue;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
  <div id="inner" class="blueClass"><!-- contains the styles for background images (icon) -->
    message text (default)
  </div>
</div>

In which the 'redClass' or "blueClass" could be added for the specific icons (i.e. toggle the classes in your jquery) for say, 'Errors' or 'info'