One background covers, one repeats x and y

Basically, I want to use two background images for my body div. I want one to cover the whole page, and one to repeat by x and y. How could this be done?

I was following this: http://icode4you.net/css-tricks-use-two-background-images-for-one-div, but it doesn't explain how to make one background cover the whole page, without repeating, while having another background repeating.

Hello johnycabbage,
It's kind of hard to tell without seeing your images but I'm guessing the image you want to fill the whole page needs to dynamically resize to different resolutions without skewing the height/width ratio.
That would require a bit of js - http://johnpatrickgiven.com/jquery/background-resize/

Then you could add a 100% height/width container that would repeat your other image.

One image was a gradient, the other was a 10x10 square.

I don't know why, but I'm avoiding using Javascript on my site. I'll dive into that language one day.

But anyways, I found the right css syntax to do so:
background:url(gradient.png), url(greensquarevector.png);
background-size: cover, 5px 5px;