why are the top and bottom of my website's background image being cut off (full-screen image background)?

问题

i'm having an issue with the top and bottom of an image getting cut off, on a website that uses a full screen background image. i initially thought that the padding: 0px and margin: 0px properties (set for html, body in the CSS) were the culprit, but i tried removing these to no avail. it should be noted that this layout was borrowed from elsewhere. there is a separate .js file, without any styling in it, that rotates the background image.

which part(s) of my CSS are the problem and how can i adjust so that the full image is always visible, regardless of which image i'm using?

bonus points for any responsive design pointers for this layout :-)

Relevant 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>

Relevant 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;
}

回答1:

Just remove all part of css and keep only html, body part style.

and add width 100% in tag as like below

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

来源：https://stackoverflow.com/questions/15604771/why-are-the-top-and-bottom-of-my-websites-background-image-being-cut-off-full

标签

html

css

image

fullscreen

image-scaling