背景图片不能随内容移动

Question

我正在开发一个使用jQuery Mobile的手机应用程序。我设置背景图片以下DIV：（代码复制从开发者工具页面渲染后）

<div data-role="page" id="create_member" data-dom-cache="true" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="height: 568px;"><div data-role="content" class="ui-content" role="main"> 

CSS：

#create_member { 
    background-image: url("../images/common/bg.png"); 
    background-repeat: no-repeat; 
    background-size: contain; 
    background-position: top; 
} 

bg.png是640x1136背景和适合iphone5的大小。

有它下方的横幅：

<div class="banner"> 

     <div class="bannerbg"><img src="skin/images/red_banner.png" \=""> </div> 

    </div> 

CSS：

#create_member .banner { 
margin-top: 34%; 
} 

.bannerbg { 
border-radius: 15px; 
-webkit-border-radius: 15px; 
-moz-border-radius: 15px; 
background: #ffe6b8; 
} 

.banner img { 
width: 97%; 
margin-top: 5px; 
} 

然而，当我尝试向下滚动页面，我发现这个背景是固定的，旗帜可以移动起来但不是这个背景。

我怎么能让横幅与背景一起坐着，当向上滚动设备时，它们一起移动？

Answer 1

据我了解，你要使用的background-imageCSS属性挑一个图像，然后有某种附加到它的旗帜。请参阅Fiddle以确认这是否是您要查找的行为。你错过的是你的父母元素relative定位和你的子元素absolute定位。

为什么我们使用绝对定位为旗帜

在绝对定位模型中，一个框明确对于抵消其包含块 - w3

为什么我们需要包含块的相对定位

一个相对定位的盒子为绝对定位的后代建立一个新的包含块。 - w3

如果你没有足够的relative定位，你的旗帜将改为按照body具有包含块一个。继这两个postioning性质，诀窍是使用bottom，left和right在0px把它粘截至父的底部的横幅，而在与它自己的内容高度仍缩放。

.banner { 
    position:relative; 
} 

.bannerbg { 
    position:absolute; 
    bottom:0px; 
    left:0px; 
    right:0px; 
} 

不知道这是你在找什么。让我知道，所以我可以调整我的答案，如果我没有得到它！:-)