爲什麼我的網站背景圖片的頂部和底部被切掉（全屏圖像背景）？

我在使用全屏幕背景圖像的網站上切斷圖像的頂部和底部時出現問題。我最初認爲填充：0px和margin：0px屬性（爲HTML設置，CSS中的body）是罪魁禍首，但我試圖刪除這些無濟於事。應該指出的是，這種佈局是從其他地方借用的。有一個單獨的.js文件，它沒有任何樣式，可以旋轉背景圖片。爲什麼我的網站背景圖片的頂部和底部被切掉（全屏圖像背景）？

我的CSS的哪個部分是問題，我如何調整以使整個圖像始終可見，而不管我使用的是哪個圖像？

任何響應式設計指針此佈局:-)積分

相關HTML：

<html> 
<body> 
<div id="main_wrapper"> 
<div id="fullscreen"> 
    <div id="backgroundImage"> 
     <div style="visibility: visible; opacity: 1;" id="homebg"> 
      <table cellpadding="0" cellspacing="0"> 
      <tbody><tr> 
       <td> 
       <img src="images/bg.jpg"> 
       </td> 
      </tr> 
      </tbody></table> 
     </div> 
     </div> 
</div> 
</div> 
</body> 
</html>

相關CSS：

html, body { margin:0; 
    padding:0; 
    border:0; 
    outline:0; 
    font-size:100%; 
    vertical-align:baseline; 
    background:transparent; 
} 
#main_wrapper { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; text-align: left; z-index: 0; } 
#backgroundImage, 
#backgroundImage table, 
#backgroundImage td  {height: 100%; overflow: hidden; width: 100%;} 
#backgroundImage  {position:relative;} 
#fullscreen { 
    position:fixed; 
    width:100%; 
    height:100%; 
    z-index:-200; 
} 
#backgroundImage div { 
    height: 200%; 
    left: -50%; 
    position: absolute; 
    top: -50%; 
    width: 200%; 
    z-index: -200; 
} 
#backgroundImage td { 
    text-align: center; 
    vertical-align: middle; 
} 
#backgroundImage img { 
    margin: 0 auto; 
    min-height: 50%; 
    min-width: 50%; 
    -ms-interpolation-mode: bicubic; 
}

來源

2013-03-24 manh2244

哪個瀏覽器中測試你的？ – 2013-03-24 22:26:03

Chrome（版本25.0.1364.172米） – manh2244 2013-03-24 22:29:54

你究竟在做什麼？你是什麼意思，旋轉背景「？ – hjuster 2013-03-24 22:30:34

只是刪除CSS的所有部分，只保留HTML，正文部分樣式。

和標籤寬度增加100％像下面

<img src="images/bg.jpg" width="100%" />

來源

2013-03-30 06:00:13 Nilesh

爲什麼我的網站背景圖片的頂部和底部被切掉（全屏圖像背景）？

回答

相關問題