html - 相对于其他背景图像对齐背景图像

Question

我的模板基于 Twitter Bootstrap，因此响应迅速。

我有两个 div，第一个包含 iPhone 框架的背景图像，第二个包含锁定屏幕的图像。我正在尝试将 screenbackground div 对齐到 iphonebackground div 之上，这样看起来它就是一个图像。这样我就可以在帧图像静止时更改 iPhone 上显示的内容。

我的问题是我无法找到一种方法将 screenbackground div 与 iphonebackground 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/