Question

我无法删除网站上的滚动条并保留整页背景web site i am working on我不想降低图像的高度，并在底部留下一条没有背景的小条。如何在没有适用于IE8的滚动条的情况下实现整页背景？

<!doctype html>
<html>
<style>
html, body {
 margin: 0px;
 padding: 0px;
 border: 0px;
 height:100%;
width:100%
}

body{background-size: 100%;}

@font-face
{
font-family: myFirstFont;
src: url(pachs___.ttf);
}

img.stretch {
    width:100%;
    height:100%;}

div.wholepage{width:100%; height:100%;border-style:solid; border-width:0px;padding:0px;}

</style>
<body>

<div class="wholepage">
<img src="images\parchment.png" class="stretch">
</div>

</body>
</html>

Answer 1

如果您不想要滚动条，可以将OVERFLOW: HIDDEN;添加到正文和＆amp; html，或者你可以确保身体的内容绝对定位，从而使身体不会继承身高。

html, body {
  margin: 0px;
  padding: 0px;
  border: 0px;
  height:100%;
  width:100%
  overflow: hidden;
}

你不能在IE8中使用background-size，因为它不受支持，CSS3PIE支持它，但它仍然是一个javascript解决方案，所以我坚持用javascript简单的东西。

在css中，这是我们原本要做的事情，这可能只适用于附带过滤器的IE8，但是可以肯定的是，我坚持使用javascript。

    html { 
      background: url(images/bg.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    }

这是一个有效的解决方案。

<强> HTML：

<img src="images/bg.jpg" id="bg" alt="">

<强> CSS

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

<强> JAVASCRIPT：

$(window).load(function() {    

    var theWindow        = $(window),
        $bg              = $("#bg"),
        aspectRatio      = $bg.width() / $bg.height();

    function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg.removeClass().addClass('bgheight');
        } else {
            $bg.removeClass().addClass('bgwidth');
        }

    }

    theWindow.resize(resizeBg).trigger("resize");

});

DEMO： http://jsfiddle.net/DUEsh/

在IE7 +中工作（可能在IE6中使用固定位置垫片）

Answer 2

如果你不想要滚动条，你可以添加overflow：hidden;身体;

html, body {
  margin: 0px;
  padding: 0px;
  border: 0px;
  height:100%;
  width:100%
  overflow: hidden;
}

如何在没有适用于IE8的滚动条的情况下实现整页背景

2 个答案: