CSS3：携帯電話の背景にコンテンツを入れる方法

Question

私はdivを持っています。そのdivには私はセンターフォンの背景イメージを持っていて、そのバックグラウンドdivにはコンテンツがあります。

だけで画像

のように私は、黒の背景のdivに電話で内容を持っていると思います。

body{ 
 
background:#f0f3f4; 
 
} 
 

 
.custom_app_phone_section_div .custom_app_phone_div { 
 
    margin: 5% auto 0 auto; 
 
    width: 640px; 
 
    height: 1136px; 
 
} 
 
.custom_app_phone_section_div .custom_app_phone_div .custom_app_phone_bg_image_div { 
 
    background: url("http://i.imgur.com/JtWe3vB.png") no-repeat; 
 
    background-size: 100% 100%; 
 
    width: 640px; 
 
    height: 1136px; 
 
} 
 
.custom_app_phone_section_div .custom_app_phone_div .custom_app_phone_bg_image_div .custom_app_phone_contents_div { 
 
    
 
    background:black; 
 
    color:white; 
 
}

<div class="custom_app_phone_section_div"> 
 
      <div class="custom_app_phone_div"> 
 
      <div class="custom_app_phone_bg_image_div"> 
 
       <div class="custom_app_phone_contents_div"> 
 
       contents div 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div>

私は携帯電話でコンテンツのdivを載せていきたいと思います。

助けがあれば助かります。

ありがとうございます。

Answer 1

.custom_app_phone_section_div .custom_app_phone_div { 
 
    margin: 5% auto 0 auto; 
 
    width: 640px; 
 
    height: 1136px; 
 
} 
 
.custom_app_phone_section_div .custom_app_phone_div .custom_app_phone_bg_image_div { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url("http://i.imgur.com/JtWe3vB.png") no-repeat; 
 
    background-position-x: center; 
 
    padding: 10px; 
 
} 
 
.custom_app_phone_section_div .custom_app_phone_div .custom_app_phone_bg_image_div .custom_app_phone_contents_div { 
 
    position: relative; 
 
    top: 7.5%; 
 
    left: 28.5%; 
 
    border: thin red solid; 
 
    width: 43%; 
 
    height: 43.5%; 
 
}

<div class="custom_app_phone_section_div"> 
 
      <div class="custom_app_phone_div"> 
 
      <div class="custom_app_phone_bg_image_div"> 
 
       <div class="custom_app_phone_contents_div"> 
 
       contents div 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div>

これをチェックしてください。

これが役に立ちます。

Answer 2

電話の画像に別の画像を追加します。整列させる。