2013-03-24 91 views
0

我在使用全屏幕背景图像的网站上切断图像的顶部和底部时出现问题。我最初认为填充: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; 
} 
+0

哪个浏览器中测试你的? – 2013-03-24 22:26:03

+0

Chrome(版本25.0.1364.172米) – manh2244 2013-03-24 22:29:54

+0

你究竟在做什么?你是什​​么意思,旋转背景“? – hjuster 2013-03-24 22:30:34

回答

0

只是删除CSS的所有部分,只保留HTML,正文部分样式。

和标签宽度增加100%像下面

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