全屏背景IMG与全屏重复背景相结合

我正在尝试将完整的背景图像与重复背景图像相结合而无需使用J Query。有可能吗？

这是我用来获取图像全屏的代码：

body {  
background: url(../img/bg1.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}

，但是现在我希望它完全由需要重复功能的.png图像背景重叠，出于简单的原因，.png包含在某些屏幕尺寸上会恢复并看起来很糟糕的行。

有什么想法？

已经尝试过：

给html一个背景和身体一个背景，它只会显示两者。

请注意，如果需要，多个背景在IE8上无法使用：

http://caniuse.com/multibackgrounds

此答案对每个浏览器都可以使用：

您必须给元素宽度和高度。

您可以在这里看到答案：http：//jsfiddle.net/rc38f/

html代码：

<html>
    <body>
        <div id="wrapper"></div>
    </body>
</html>

CSS代码：

html {
    width: 100%;
    height: 100%;
}
body {
    background-image: url('http://www.colourbox.com/preview/4632391-637684-seamless-small-white-flowers-pattern-background.jpg');
    background-repeat: repeat;
    width: 100%;
    height: 100%;
}
#wrapper {
    background: url('http://i.telegraph.co.uk/multimedia/archive/02403/Jonstockshooting_2403237b.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    width: 100%;
    height: 100%;
}

可以在一个标签上包含两个背景图像。

如何工作

可以使用要么指定多个背景图像各个背景属性或背景速记属性。

这应该是一个有用的资源，可以使您入门。

CSS：

body {
    background-image: url(http://www.wallcoo.com/paint/Chiplegal_vector_art/images/%5Bwallcoo.com%5D_vector_art_0seasons.jpg), url(http://nopgc.org/v2/images/body_bg.jpg);
    background-position: top center, center;
    background-repeat: no-repeat, repeat;
    width: 100%;
    height: 100%;
}

小提琴：演示

相关内容

最新更新

热门标签：