tiling two images in background in ie8

Question

I have a 10px x 765px graphic that I repeat-x, then I have a repeating graphic that is 20px x 20px that I want to pick up once the page goes beyond 765px in height.

Is it possible to do this?

body {
  background: #000 url('/assets/images/background_x_tile.png') repeat-x;
}

Both background images included here, I don't know how to tile the smaller image once the page reaches the end of the 765px height image.

Trying to accomplish what this looks like:

Answer 1

Use one bg image on the html tag and another on the body tag

Codepen

html {
  background-image: url(https://i.sstatic.net/Yowiu.png);
   background-position: 765px 0;
}

body {
background-image: url(https://i.sstatic.net/FtvK0.png);
  background-repeat: repeat-x;
}