Place images behind cells in Numbers

Numbers ‘08, the new spreadsheet application in iWork ‘08, brings some powerful new tools to the table. As noted in my Numbers review, the ability to place multiple grids anywhere on a page, and mix them with text, graphics, and images, allows you to create some truly great looking output.

As I was using Numbers and taking notes for the review, one of the things I tried to do was to place an image as a background for a range of cells. In Pages, it’s simple to make an image live “behind” all the text on a page; with the proper image set to a high degree of translucency, the end result can look sharp.

It’s easy to get images into Numbers, using the Media icon on the toolbar, the Insert -> Choose menu item, or even drag-and-dropping them from the Finder or a graphics application. These images are added to the “top” layer of your worksheet, however, so they’ll obscure everything. No problem; Arrange -> Send to Back moves them behind the table cells. However, that didn’t solve my problem, as you can see in the image below and to the right. I’ve added a house picture behind the table in the Loan Comparison template. But the white cells are completely obscuring the background image.

You might think this is because those cells are filled with white, but they’re not—if you select a cell and then open the Graphic Inspector, you’ll see that its fill is set to “None.” But if that’s true, why isn’t the house image showing through? Here’s the secret: in Numbers, any placed grid also has a fill, and it defaults to filling with white. In essence, each grid contains two layers: the bottom “grid” layer is filled with white, and the “cells” on top of that grid may be filled (or not), depending on which style (Blue Headers, Blue Fill, etc.) you choose for that grid.

So to make the cells actually show the image that now resides behind them, you also have to remove the fill from the grid itself. Do that by selecting the grid—click once on the grid to activate it, and then when you can see the row and column headers, click in the “drag” spot above the “1” and to the left of the “A,” as seen in the image at right. When you do that, the row and column headers will vanish, leaving the grid with a selection box around it.

Open the Inspector (if it’s not opened already), switch to the Graphic tab, and set the Fill to None. When you do, you’ll see that the cells in the body of the table are now showing the background image (if you’re using the Loan Comparison template), but the Total Paid row is still white. That’s because those cells are actually set to have a white fill; select the row and use the Graphic Inspector to also set their Fill to None.

You can then use the Fill feature, along with the Opacity slider on the Colors dialog, to vary which cells show what parts of the image and with how much translucency. For example, here’s the Loan Comparison page after I tweaked most of the cells:

Summarizing then, to use background images in Numbers, you need to make sure that both the grid and the cells within the grid have a fill value of none—or if they do have fills, you need to use the Opacity slider to make them translucent. Also note that I’m not saying that my example here is a good one to actually use—I wouldn’t tend to put a busy image of a home behind a small table of numbers like that. It was chosen simply because it worked well for this example—so please no comments on my admittedly-bad design skills!