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

我的模板基于Twitter引导，因此响应迅速

我有两个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%;
}

---

为什么不创建第二个与第一个尺寸完全相同但具有透明边距的图像？有两个相等的图像时，它们会相应地调整大小

<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");
}

.iphonebackground、.screenbackground{
背景图像：url（“http://chpwn.com/apps/iphone-frame.png");
背景重复：无重复；
背景位置：中心；
背景大小：100%100%；
高度：300px；
}
.屏幕背景{
背景图像：url（“https://dl.dropbox.com/u/290586/iphone-bg.png");
}

---

顺便说一句，宽度很好，但高度不行。先生，你是一个活生生的储蓄者+！

<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");
}