You’re viewing an archive of outdated material. Visit The Web Standards Project’s updated site to learn about our current mission.

Tiled Backgrounds Demonstration

Introduction

IE4 supports background-repeat and background-position incompletely. It repeats tiled background images down and to the right, no matter where the initial image is positioned. If an author positions an image in the center of an element and then sets it to repeat, it will fill only the lower right corner of the element. The specification, however, requires that in this case the image be tiled in all four directions: up, down, right, and left. A similar problem holds with repeat-x and repeat-y, which should repeat in both directions either horizontally or vertically.

Make sure images are enabled for these demonstrations.

Example 1

In each of the boxes below, there should be nine cats. Written in each box is the value which was given for background-position. Since background-repeat is set to repeat, the background-position should just be taken as a starting position, letting the tiling spread in all directions.

50% 50%
100% 50%
50% 100%
100% 100%

Just to satisfy all you cat lovers, this is what should happen:

Example 2

In the next box, there should be a row of Samurai logos going from the left to the right of the box, across its vertical center.

repeat-x 50% 50%

Example 3

In the next box, there should be a vertical line of Samurai logos, centered horizontally.

repeat-y 50% 50%

Example 4

Here, we have tried to put a horizontal row of these Samurai logos, making sure the middle logo is horizontally centered, and letting the UA center from there.

Samurai

Home of the Web Standards Project CSS Action Committee -- dedicated to improving the level of standards conformity across the board.

Unfortunately, IE doesn't do this correctly, leaving the left hand side unfilled.