CSS фоновое изображение -> Использование изображения

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

Использование полосы даст вам увеличение пропускной способности, сохраняя при этом некоторую меру качества, в то время как использование фрагмента с повторением xy снизит качество и обеспечит более высокую сохранность полосы пропускания.

Answer 3

Сначала удалите радиальный градиент на исходном изображении. Затем создайте полосу с несколькими планками, чтобы при повторении она выглядела естественно. Чтобы воспроизвести градиент, используйте радиальный градиентный фон css3 . Если требуется поддержка устаревшего браузера, включите прозрачный png для градиента в качестве запасного варианта.