Question

我有这个简短的例子：

CODE CSS：

 body{
background:url(DECUPATE/TEST/images/ppp.jpg);
bacground-size:contain;
backgoun-repeat:none;
}

我画了一张照片来了解他们想做什么。

http://i61.tinypic.com/10xeeeb.jpg

如果您将background size: cover放在最后但是图像不完整。

我该如何解决这个问题？

提前致谢！

Answer 1

你必须使用html而不是body，请参阅下面的代码：

html {
      background: url(images/bg.jpg) no-repeat center center fixed; 
      -webkit-background-size: 100% 100% cover;
      -moz-background-size: 100% 100% cover;
      -o-background-size: 100% 100% cover;
      background-size: 100% 100% cover;
      /* set the padding and margin to "0" */
      margin: 0;
      padding: 0;
     /* set the position rules */
    top: 0;
    left: 0;
  }

Answer 2

你可以使用jquery插件backstretch 这将允许背景延伸到屏幕外。它也适用于较小的屏幕。

http://srobbin.com/jquery-plugins/backstretch/

从上面给出的网址下载backstrech js并将其添加到您的标头标记中。使用脚本标记中的以下代码启动backstretch

  $.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");

Answer 3

看一下这个例子，获得最广泛的支持：

 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;

https://css-tricks.com/perfect-full-page-background-image/

Answer 4

不要将其视为一个背景。为页眉和页脚提供background-img并将标题位置设置为background-position:center top，并将background-position:center bottom的“页脚”位置另外将background-size属性添加到100％或覆盖。由于两个元素具有相同的宽度，因此size属性对两者都具有相同的效果。

Answer 5

添加CSS代码background-attachment:fixed;
如果向下滚动，这将使背景保持不变。

Answer 6

<body> <img src="images/ppp.jpg"> </body>

body{
    margin: 0;
    padding: 0;
}

body > img{
        width:100%;
        height: 100%;

        /*For IE*/
        top: 0;
        bottom: 0;
        position: absolute;
    }

如何将背景图像保持到页面结束

6 个答案: