html - 如何将背景图像拉伸到整页以及不同高度的不同页面？

Question

我有这张图片“忽略图片顶部的红线”

我希望这张图片成为我的 html 页面的背景，它以白色开头，以蓝色结尾，我想要的是：使用 css 根据页面高度在背景中拉伸此图片，例如在某些页面中页面在浏览器中滚动时高度变为 2000px，有些页面高度为 1000px，我需要所有页面使用相同的背景图像并使用 css 拉伸它。

我希望它在所有浏览器上运行，包括 IE 7、8、9

我试图做的是：

div.fullscreen
{
    display: block; /*set the div in the top-left corner of the screen*/
    /*set the div in the top-left corner of the screen*/
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-image: url("../images/landingpage_bg.png");
    background-repeat: repeat-x;
}

但它没有很好地伸展。

Answer 1

唯一的一种方法是裁剪你的图片，用repeat-x将它放在背景底部，并在body\html上使用border-top，或者你将用于你的图片的任何东西

Answer 2

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;
    background-repeat: repeat-x;
}

希望这可以帮助