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;
}

enter image description here

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:

enter image description here

it's working fine by using "body { background:url(image_url) repeat-x; }" — Priya jain, Jan 29 '14 at 12:44
Try to use media query for this.."@media screen and (min-width: 765px) and (orientation: landscape)" — Priya jain, Jan 29 '14 at 12:47

score 1 · Accepted Answer · answered Jan 29 '14 at 12:48

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

Codepen

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

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

score 1 · Answer 2 · answered Jan 29 '14 at 12:53

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/

score -1 · Answer 3 · answered Jan 29 '14 at 12:43

-1

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 :)

answered Jan 29 '14 at 12:43

Green Wizard

3,507
4
18
29

tiling two images in background in ie8

3 Answers3