Using background and foreground imagesLessons to be learned from this page:
|
This table uses the images in various ways to illustrate the first five points above. Use "view source" to see how it all works. The table width is set to be exactly twice the width of the 352-pixel-wide picture of Bob. The height is set to a minimum of 750, but this paragraph of text and the two images actually add up to more than that, so the table expands to make everything fit. |
|
This table has the same height and width settings as the one above, and the same number of cells. But this time the holly and the square-spiral are the foreground images of the bottom two cells instead of backgrounds. Notice how the long (foreground) string of holly in the bottom row overrides the measurements for that cell, pushing it out to 800 instead of 352). That, in turn, forces the whole first column to be wider, which lets this paragraph spread out to 800 pixels wide, and forces the stained glass background to repeat to fill the cell behind the first Bob image.
Since there is no picture of Bob to force the bottom row to be the same 348 pixels high as the second, the top and bottom rows get a lot of extra space to add up to the set table height of 750. Notice that the holly changes the widths for the whole table, even though it is in the bottom row. And notice that the square spiral only appears once when it is in the foreground. (Only background images repeat or "tile" to fill space.) |
|