Using background and foreground images

Lessons to be learned from this page:
  1. Each cell of a table can have a different background image, background color,or both.
  2. Making a cell the same width and height as the foreground image enhances the illusion that the cell background and foreground images are one.
  3. Photoshop can erase part of a GIF image, making it transparent so that a background color or image can show through. (But you have to be careful not to leave a narrow white edge around the image, unless you plan to put it on a white background.)
  4. If a background image is smaller than the space it is assigned (as background to a cell, or a whole page), it will "tile" to fill the space.
  5. If a background image is larger than the space it is assigned, only the part of the image that fits the space will show.
  6. However, if a foreground image or text is larger than the dimensions of the cell or table it is assigned to, the cell will expand to fit it regardless of any width or height settings for the cell or table.
Here are the "raw" images:


Bob in a hat (352 x 348 pixels):
Some stained glass:

A little square spiral icon:

An 800-pixel-long string of holly:
(Use a browser window wider than 800 pixels to see what's going on with 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.)
Confused? Write to confused@stepno.com for help.