Before I start. I've added another answer to the question you referenced, which you may find useful as an example.
Before I get into commenting on your code. Are your character images cropped to more or less what you see or do they include significant padding? I ask because that's going to be an important factor in the values you'll need to use to position them as you want.
You also (based on the sample images) seem to using the same image facing for both characters—i.e. they both face right. If so, you're going to need to flip the right-side character, so they face left. That can be done in CSS, which should save you from needing to have two different facings for each character. I'll show an example of that.
On to code commentary.
You're generating a lot of whitespace in your widget (the various nobr features do not save you from that), so I'd recommend using the <<silently>> macro for the parts which shouldn't generate output and line continuations for the rest. You're also creating an extra layer of markup around your images that you probably do not need. I suggest something like the following:
<<widget "scene">>
\<<silently>>
<<set _bg to "pics/bg/" + $args[0] + ".jpg">>
<<set _a1 to "pics/cutout/" + $args[1] + ".png">>
<<set _a2 to "pics/cutout/" + $args[2] + ".png">>
<</silently>>
\<div id="scene">
\<<= '<img class="bg" src="' + _bg + '">'>>
\<<= '<img class="a1" src="' + _a1 + '">'>>
\<<if $args.length gte 3>>
\<<= '<img class="a2" src="' + _a2 + '">'>>
\<</if>>
\</div>
\<</widget>>
You'll also note that I added an ID to the scene wrapper and removed the styles, which are better as part of your stylesheet.
Your CSS could use a little clean up as well. This likely isn't going to be perfect, without your resources to work with some of this will be guesswork, but it should be in the ballpark of what you need. It's been tested, so I know it does more or less what you want.
#scene {
position: relative;
display: block;
margin: auto;
width: 95%;
height: 600px;
padding: 5px;
overflow: hidden;
}
#scene img {
position: absolute;
}
#scene .bg {
left: 0;
top: 0;
}
#scene .a1 {
left: 25%;
top: 0;
}
#scene .a2 {
right: 25%;
top: 0;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
Note the transform on the second actor style rule, which is what flips its facing.
[Edit] Based solely on your sample images, it looks like you may need to reduce the values of the X-coordinate properties (left & right)—as I alluded to earlier. In other words, if the images aren't cropped closely, having significant built-in padding, then you'll probably need to use smaller values to get them positioned as you like.