Question

我有一个包含8个部分的水平网站，所有部分都需要一个完整的背景图片，需要使用浏览器重新调整大小。请查看：http://www.dancephotography.net.au/test1.htm

要温柔......我是一个没有闪光知识的新手。这是一个未完成的设计，将成为其他页面的模板。

Answer 1

@belinda;你可以用css3 cover属性

点缀它

.wrap {
        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;
}

＆安培;对于IE，你可以FILTER

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

或者您可以像这样使用100%。

.wrap {
            background: url(images/bg.jpg) no-repeat center center fixed;
            -webkit-background-size: 100%;
            -moz-background-size: 100%;
            -o-background-size: 100%;
            background-size: 100%;
    }

根据heigfht＆amp; amp; div的宽度。 更多检查此链接 http://css-tricks.com/3458-perfect-full-page-background-image/

Answer 2

使用div下方的img将更容易，因为您可以设置最大/最小宽度和/或高度，以便图像不会过于笨拙地扭曲。

此解决方案不是特定于CSS3的，因此任何浏览器的行为都应该相同。我为你输入了一个例子，可以在http://jsfiddle.net/Qzcnn/找到。

具有多个部分的1页面布局的可调整大小的背景

2 个答案: