背景圖像中心與邊緣排隊：0自動與滾動條

Question

我想有一個垂直伸展在我的網站上的居中背景圖像。 沒有滾動條移動我的居中圖像，但保留我的邊距：0自動到位。現在我的內容不符合我的背景圖像。

Html, Body 
{ 
    width: 100%; 
    height: 100%; 
    background: url('../Images/page-bgr-top.png') 
       center top repeat-x; 
    overflow: auto; 
} 

Body { 
    background: url('../Images/page-bgr-content.png') 
       center top repeat-y; 
    display: block; 
    overflow: scroll; 
} 

#Main-Page 
{ 
    width: 900px; 
    margin: 0 auto; 
    height: 100%; 
    display: none; 
} 

嘗試了不同的解決方案通過設置#Main-Page的background-image和overflow: auto，也並馬上在我的網站一些討厭的滾動條。

Answer 1

。計算滾動條的寬度並將其添加到居中元素的偏移量。

Answer 2

這是監守你添加太多的CSS使用JavaScript解決了HTML和身體

Html, Body 
     { 
      /*width: 100%;*/ removed 
      height: 100%; 
      background: url('../Images/page-bgr-top.png') 
         center top repeat-x; 
      /*overflow: auto;*/ removed 
     } 

     Body { 
      background: url('../Images/page-bgr-content.png') 
         center top repeat-y; 
      display: block; 
      /*overflow: scroll;*/ removed 
     } 

     #Main-Page 
     { 
      width: 900px; 
      margin: 0 auto; 
      height: 100%; 
      display: none; 
     }