フルサイズの背景画像right height可変div付き

Question

私はインターネット上で見つけた例に基づいて、次の中心の背景画像のコードを書きました。右端に300pxの幅のボックスを追加する必要があります。特定の位置合わせを上と右に基づいて行いますが、コードが機能しません。

<style type="text/css"> 

     #bg { 
      position: fixed; 
      top: -50%; 
      left: -50%; 
      width: 200%; 
      height: 200%; 
     } 

     #bg img { 
      position: absolute; 
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0; 
      margin: auto; 
      min-width: 50%; 
      min-height: 50%; 
     } 

     #box 
     { 
      position: absolute; 
      width: 300px; 
      top: 200px; 
      right: 100px;    
      background-color: White; 
     } 

    </style> 

    <div id="bg"> 
     <img src="bg.jpg" alt=""> 
     <div id="box"> 
      <p>some</p> 
      <p>some</p> 
      <p>some</p> 
      <p>some</p> 
      <p>some</p> 
      <p>some</p> 
      <p>some</p> 
      <p>some</p> 
      <p>some</p> 
      <p>some</p> 
     </div> 
    </div> 

Answer 1

あなたは（例えば、それら兄弟作る）#bg外#boxを移動する必要があります。

#bg { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
    } 

、その後#box表示されます。

その他のオプションは、このようにあなたの#bgを定義することです。問題は、#bgが "global"というバックグラウンドとして動作しないことです。前者がビューポートをオーバーフローした場合、後者はサイズを保持しないためです。