CSS градиент с проблемой высоты полосы изображения

Question

Как я могу использовать мою полоску с линейным градиентом, mystrip.jpg (1x1024 px), чтобы быть фоном тела моей веб-страницы? Мне нужно повторить себя по горизонтали и иметь его рост 100% роста.

Я пытался с

body{background:url(mystrip.jpg) repeat-x;} 

но всякий раз, когда содержание моего тела превышает 1024px высоты, я могу ясно видеть нижнюю границу моего рисунка полосы.

Спасибо

Luca

Answer 1

Вы должны также установить цвет фона, чтобы в месте, где изображение заканчивается, цвет взял верх. Сделайте цвет фона таким же, как и нижний цвет вашего изображения.

Пример:

body{ background: #ccc url(mystrip.jpg) repeat-x; }

Answer 2

Просто установите цвет фона, соответствующий нижнему цвету.

body{background: #f00 url(mystrip.jpg) repeat-x;} 

Или какой бы ни был цвет.

В качестве альтернативы вы можете использовать фоновый размер, но, скорее всего, он не будет выглядеть хорошо.

Я бы также рекомендовал использовать CSS-градиенты.