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(http://i.stack.imgur.com/Yowiu.png);
   background-position: 765px 0;
}

body {
background-image: url(http://i.stack.imgur.com/FtvK0.png);
  background-repeat: repeat-x;
}

Answer 2

Apply the 20px x 20px image as a background image to the HTML element and have the 10px x 765px image as a background to the body element.

If this solution doesn't meet your needs you could look at adding a CSS media block like:

@media screen and (min-height: 765px)

More information on CSS @media blocks here:

http://css-tricks.com/css-media-queries/

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

http://www.w3.org/TR/css3-mediaqueries/

Answer 3

background-size:cover

this will not give the effect you are desiring for. simply add the above code to the css where you have applied background.

Almost gives the same output :)