API
@-Formulas
JavaScript
LotusScript
Reg Exp
Web Design
Notes Client
XPages
 
Image With Text On Top
When creating a new application recently, I was given a logo image by the customer to be included in the upper left corner of the application (it was a Notes client application). The customer wanted also to have the application name appear on top of the image.

One way to accomplish this is to create a 1x1 table. Every table cell can have an image as its background. You go to the third tab in the table properties to set the background image (use an image resource). Then the table cell can have whatever text you want inside it, which puts the text over the top of the image.

There are a couple of drawbacks to using that method, however. The first was that the height of the table cell is generally dependent on the text content of the cell, and not the image background. So you have to either fix the cell height (table properties, first tab) or add white space to the text content to fix the height. The second problem is that the image can't be sized. This was a problem for me, because the image the customer gave me was rather large (larger than a standard logo). I could use a software program, size the image, then bring in the updated image as the image resource. But that's extra effort on my part and the same technique would need to be applied if the image ever changed.

A second alternative is to set the image as the background of the page design element. You can then put content anywhere you want on top of the image. Again, you can't size the image, which was a problem for me. But you don't have to worry about the height like you do with a table cell background.

I used a third way to have an image with text over the top. I opened up the page design element and brought in the image resource right on the page. (In other words, I didn't create a table, didn't set the image to be background of the page, etc). This is done through Create | Image Resource. I then had some picture properties where I could size the image (scaling %, on the first tab of picture properties). Within picture properties, you can set a caption to appear on top of the image, but the only choice is "centered" (the caption can also appear below the image, but that's not "on top of") and you don't have any control of the font. So I didn't use a caption. (I did use alternate text, however, for accessibility reasons).

After creating the image, I created a layer design element. I could position the layer exactly where I wanted it, so I set it to be directly on top of the image - same top and left position, and the same width and height as the image. The layer can have whatever content you want. I put in the name of the application, and then centered the text and set the font size and color to give a nice contrast to the image background. The text could even be a computed value if I wanted (I didn't need it for this application). So I get the original image, sized correctly, with text appearing on top of the image, just like the customer wanted.