将背景图像相对于其他背景图像对齐

Question

我的模板基于Twitter Bootstrap，因此具有响应性。

我有两个div，第一个包含iPhone帧的背景图像，第二个包含锁定屏幕的图像。我试图对齐iphonebackground div顶部的screenbackground div，看起来它是全部图像。这样我可以在帧图像是静态的时候改变iPhone上显示的内容。

我的问题是，我找不到一种方法来对齐iphonebackground div上的screenbackground div，以便即使当iphonebackground div的大小发生改变时（屏幕调整大小时），screenbackground也会正确缩放并保持对齐状态。

<div class="iphonebackground"> 
    <div class="screenbackground"></div> 
</div> 

.iphonebackground { 
    background-image:url("../img/iphone-frame.png"); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: 100%; 
    height:576px; 
} 

.screenbackground { 
    background-image:url("../img/iphone-background.jpg"); 
    background-repeat: no-repeat; 
    background-position: center; 
    height:50%; 
    width:66%; 
    padding-right: 23%; 
} 

编辑：我已经改变了代码如下，这是非常接近，但仍不能完全正确：

.iphonebackground { 
    background-image:url("../img/iphone-frame.png"); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: 100%; 
    height:511px; 
} 

.screenbackground { 
    background-image:url("../img/iphone-background.jpg"); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size:60% 50%; 
    height:511px; 
} 

Answer 1

你为什么不创建完全相同的第二图像第一个尺寸但透明边距？有两个相同的图像，他们相应地调整大小。

<div class="iphonebackground"> 
    <div class="screenbackground"></div> 
</div> 

.iphonebackground, .screenbackground { 
    background-image:url("http://chpwn.com/apps/iphone-frame.png"); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: 100% 100%; 
    height:300px; 
} 

.screenbackground { 
    background-image:url("https://dl.dropbox.com/u/290586/iphone-bg.png"); 
} 

http://jsfiddle.net/notme/zYV8x/