css gradient with image strip height issue

How could I use my linear-gradient pattern strip,mystrip.jpg (1x1024 px), to be the body background of my web page? I need to repeat itself horizontally and have its height 100% of the body height.

I tried with

body{background:url(mystrip.jpg) repeat-x开发者_开发技巧;} 

but whenever my body content is exceding 1024px height,I can see clearly the bottom border of my strip pattern.

Thanks

Luca

Just set a background colour that matches the bottom color.

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

Or whatever the colour is.

Alternatively you can use background-size, but that likely won't make it look good.

I'd recommend using CSS gradients where possible as well.

You should set a background color also, so that where the image ends, the color takes over. Make the background color the same as the bottom color of your image.

Example:

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