フルスクリーンの背景の中にコンテンツを整列させますか？

Question

私はthis tutorialを使用して、フルスクリーンの背景を作成しています。私は自分のコンテンツdivを画面の中央に置いて欲しい。ウィンドウのサイズを変更すると、ウィンドウに移動する必要がありますが、中央に留まります。私は通常margin: 0 auto 0 auto;を使ってこれを達成します。しかし、この場合、フルスクリーンの背景のため、左上に座っています。

コンテンツの区切りを中央に配置し、左右の余白を設定するにはどうすればよいですか？

CSS：

 * { 
      margin:0; 
      } 

     html, body { 
      height:100%; 
      } 

     .clear { 
      clear:both; 
      } 

     body { 
      font-size: 62.5%; /* Resets 1em to 10px */ 
      background-repeat:repeat-x; 
      background-image: url('images/background-repeat.jpg'); 
      margin:0px; 
      } 

     #body { 
      width:1000px; 
      margin:0 auto 0 auto; 
      }   

#content { 
    background-image:url('images/william-corbett-content-repeat.png'); 
    background-repeat:repeat-x repeat-y; 
    width:1000px; 
    min-height:500px; 
    } 

     .fullBg { 
      position: absolute; 
      top: 0; 
      left: 0; 
      overflow: hidden; 
     } 

     #maincontent { 
      position: absolute; 
      top: 0; 
      left: 0; 
      z-index: 50; 
     } 

HTML：

<div class="wrapper"> 
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/bg1.jpg" alt="" id="background"> 
    <div id="maincontent"> 
     <div id="body"> 
      <div id="content"></div> 
     </div>  
    </div> 
    <div id="footer"> 
     <p><a href="/home" title="Home">Home</a> | <a href="/about" title="About">About</a></p> 
    </div> 
</div> 

Answer 1

あなたが幅を追加する必要があります：100％; ＃メインコンテンツクラスへ

#maincontent { 
position: absolute; 
top: 0; 
left: 0; 
z-index: 50; 
width: 100%; 
}