CSS背景图片 - ＆gt;使用图像

Question

我正在使用下面的图片，但我按原样使用它并且它没有占据屏幕的100％。

我已经考虑过以下几种选择，但我很感激有关如何做的建议：

1. 创建一块木纹瓷砖？
2. 创建一条木纹？

当前CSS

html{
    background: url('../img/Body_BG.png') repeat-x 0 0 scroll;
    background-color:#0C0C0C;
    height:100%;
    width:100%;
}

图片

Answer 1

将background-size: 100% 100%;添加到html并将repeat-x更改为no-repeat。

演示：http://jsfiddle.net/ThinkingStiff/jUr9E/

html{
    background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
    background-color:#0C0C0C;
    background-size: 100% 100%;
    height:100%;
    width:100%;
}

Answer 2

使用条带将为您带来带宽增益，同时仍然保留一定的质量标准，而使用带有x-y重复的图块会降低质量并为您提供更高的带宽保存。

Answer 3

首先，删除源图像上的径向渐变。然后创建一个带有几个板条的条带，这样重复时看起来很自然。要重现渐变，请使用css3 radial gradient background。如果需要旧版浏览器支持，请为渐变添加透明png作为后备。