在ie8中在背景中平铺两个图像

Question

我有一个10px x 765px图形，我重复x，然后我有一个20px x 20px的重复图形，一旦页面高度超过765px，我想要拾取。

是否可以这样做？

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

这里包含两个背景图片，我不知道一旦页面到达765px高度图像的末尾，如何平铺较小的图像。

尝试完成以下内容：

Answer 1

在html标记上使用一个bg图像，在body标记上使用另一个

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

将20px x 20px图像作为背景图像应用于HTML元素，并将10px x 765px图像作为body元素的背景。

如果此解决方案无法满足您的需求，您可以查看添加CSS媒体块，如：

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

有关CSS @media阻止的更多信息：

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

这不会产生你想要的效果。只需将上述代码添加到您已应用背景的css。

差不多给出相同的输出:)