фоновое изображение не будет повторять полную высоту

Question

Here вы можете увидеть мою проблему. Фоновое изображение настроено на повторную целую высоту, но оно не работает как требуется.

Мой CSS

#wrapper { 
    margin: 0px; 
    padding: 0px; 

    background: url(img02.jpg) repeat-x left top; 
} 

Я пытался добавить theese линии

body { 
    margin: 0; 
    padding: 0; 
    background: #F7F7F7 url(img01.jpg) repeat left top; 
    font-family: Georgia, "Times New Roman", Times, serif; 
    font-size: 14px; 
    color: #5A554E; 

/* theese lines added*/ 
     min-height:100%; 
     height:auto; 

} 

Но все-таки фоновое изображение не будет повторять все высоты.

Answer 1

Вы только устанавливаете repeat-x, который говорит ему повторять по оси x, однако при повторении такого рода изображения с градиентом изображение становится довольно уродливым. Вместо этого я рекомендую делать все с помощью css, если это возможно.

Один из многих полезных инструментов для создания CSS градиенты: http://www.colorzilla.com/gradient-editor/

Answer 2

Если вы хотите, чтобы растянуть фон для заполнения страницы, используйте:

background-size: 100%; 

В противном случае, если вы хотите повторить, используйте ответ Эрика.