CSS: Keep a child (img) properly aligned over a background (img) - css

Question

Say I have a small transparent gif I want to align and scale over an image that can scale as the browser changes size. You might have guessed that yes, I want a seamless little animation over photograph such that a small portion of the photo seems to be animated.
Is this just too difficult for pure CSS? I'm already starting to do it in js, just seems complicated with CSS. So while I move on and do it with code, anyone have a funky CSS methodology by chance?
Tried something like this but for some reason the floater image scales with the browser (visible) percent, not the parent div containing the bg image.
<div id="bg-image">
<div class="bg-container">
<img class="photo" src="../images/bg_artist.jpg" alt=""/>
<img class="floater" src="../images/twitter.png" alt="" />
</div>
</div>
just pretend i want the child image to show in the lower right:
#bg-image .container
{
width:102%;
margin-left:-10px;
}
#bg-image .photo
{
width:102%;
margin-left:-10px;
}
#bg-image .floater {
position:fixed;
left:90%;
top:90%;
}
Well, after futzing around, the js solution is pretty simple:
var floater = document.getElementById("floater");
var photo = document.getElementById("bg-photo");
floater.style.left = photo.width * .9 +"px";
floater.style.top = photo.height * .5 + "px";
Sorry, I'd put it in a jsfiddle, but it's hard since it deals with the whole browser.

Answer 1

I'm a little unclear what you want the final behavior to be, but this has the images scaling and staying located in relation to each other.
HTML
<div id="bg-image">
<img class="photo" src="path/bkgimage.png" alt=""/>
<img class="floater" src="path/floatimage.png" alt="" />
</div>
CSS
#bg-image {
position: absolute;
width:100%;
left: 0;
top: 0;
}
#bg-image .photo {
width:100%;
}
#bg-image .floater {
position:absolute;
width: 10%;
height: 10%;
bottom: 0;
right: 0;
}