전체 높이 가변 높이의 배경 이미지 오른쪽에

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"배경으로 동작하지 않는다는 것입니다. 전자가 뷰포트를 오버플로하면 뷰포트가 크기를 유지하지 못하기 때문입니다.