右側可變高度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

你必須移動#box外#bg（例如，讓他們兄弟姐妹）。

其他選項是定義#bg就象這樣：

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

然後#box就會出現。問題是#bg不會像「global」背景那樣行事，因爲如果前者溢出視口，那麼後者將不會調整大小來保存視口。