当屏幕尺寸缩小时，停止图像跳出位置

当我在运行下面的代码后缩小屏幕尺寸时，图像phone.png和所有文本跳出位置。我怎样才能阻止这种情况发生。当屏幕尺寸缩小时，停止图像跳出位置

CSS：

<style type="text/css"> 
    #wrapperlp { 
     width: 100%; 
     height:700px; 
     margin-left:13%; 
     margin-top:5%; 
     background-image:url(https://***/blackbg.png); 
     background-repeat:no-repeat; 
     opacity:1; 

    } 

    #designbg { 
     background-repeat:no-repeat; 
     margin-left: 5%; 
     padding-top: 3%;   
    }

造型文本

#ad_head {   
     color: #f2852d; 
     font-weight: bold; 
     margin-left: 28%; 
     margin-top: -21.5%; 
     font-size: 21px; 
    } 

    #ad_message { 
     margin-left: 28%; 
     font-size:10px; 
     color:white; 
     font-weight:normal; 
    }

风格phone.png图像：

#ad_logo { 
     height: 500px; 
     margin-left: 2%; 
     margin-top: -42%; 

    } 

    #logobtm { 
     margin-left: 2%; 
     margin-top: -42%; 
    } 
</style>

HTML：

<div id="wrapperlp"> 
    <div id="designbg"><img src="https://*****/image.png" /> 
     <div id="ad_logo"><img src="https://****phone.png" /></div> 

     <div> 
      <div id="ad_head">Text1<br />Text...</div> 
      <div id="ad_message">Text2</div> 
      <div id="logobtm"><img src="**.png" /></div> 
     </div> 

    </div> 
</div>

来源

2014-02-10 user3288249

你可以创建一个这样的小提琴吗？ [小提琴]（https://jsfiddle.net） –

创建于：http://jsfiddle.net/vCZy7/2/...其中的文字是？该死的！ – loveNoHate

文字颜色白色！ – user3288249