How to make an extending Banner into a repeating background

So I really hate using this site as an example but it has coding styles I really like and would like to use on my site.

here is a gif to get a better understanding.



Explanation: So As you see, when I start before scrolling it looks like a banner however when you scroll down it extends and now seems like a background, however when scrolling more there is a repeating background behind the image. I would like the coding to do this please. I believe I understand how it works, there is a transparent banner and the image is entirely two backgrounds one that acts like a banner and has bottom part of it transparent and blends in with the actual repeating background. I would like the code to do this though please. Also if you need to check it out some more here is the link to the site, http://www.strongworldrol.com/

I would like to know how the footer and the forum wrapper as well as the census was done but I guess I need another thread for those I really would like to stop bothering you guys about making codes like the ones from this site but this site is the best example of what I have been looking for, for the longest time.

It looks like a banner plus an image for the background.

Yes but if you look at the site the actual banner drags down a bit and eventually fades off into a banner

CSS Stylesheet:

Code:

body {
    background: url("IMAGE URL") no-repeat scroll center top, YOUR COLOR url("IMAGE URL") no-repeat fixed center center;
)

Image URL = add your images
Your Color = add your color

So I ran the code on a mock site I made before posting it on the actual site, thank god I did, it's getting there , there is only one issue. . .the banner or main image rather refuses to fill the bottom gap, any ideas?

Hey,

If you don't want the background to repeat, try adding background-size:cover; to the rule, so you get :

Code:

body {
    background: url("IMAGE URL") no-repeat scroll center top, YOUR COLOR url("IMAGE URL") no-repeat fixed center center;
  background-size:cover;
)

Otherwise, just replace no-repeat by repeat so the image repeats to fill the empty spaces.

SOLVED!