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

时间:2011-06-26 02:31:03

标签: jquery css

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

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

2 个答案:

答案 0 :(得分:0)

@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; div的宽度。 更多检查此链接 http://css-tricks.com/3458-perfect-full-page-background-image/

答案 1 :(得分:0)

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

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