If you've cruised around our Zen Lightning brand Intranet, you may have noticed a common design element: the use of "watermark" background images on sections. All of these are created within the CONTENT of Zen Intranet (as opposed to the BRAND), but they do a great deal of work to visually extend the brand, helping the user to feel 'invited in' to the content.

Here's how we did it:

  1. Create your watermark images. (We did this in Adobe Illustrator, first deciding on a general look and feel that integrated well with our Intranet brand, and then reducing the opacity so that the Brand Palette colors are reinforced, but visually recede to 'get out of the way' of content.)
  2. Pick a page where you'd like to add a watermark image to a section.
  3. Attach the watermark to that page.
  4. Add your chosen watermark image to a Zen Section:
    1. Open the Section Designer
    2. Specify the name of your watermark in the "Image" field. 
    3. Set it's position. (In this case we used percentages, but Zen just uses standard CSS background image settings, so you can use pixels if you prefer. HINT: the Section Designer will show you a "live" preview of that background image's placement in the section, which should hopefully save you some tweaking time.)
    4. Set to "no-repeat"
  5. That's it! Hit "apply" and you should be good to go.

Images Across Spaces

Please note that if you are inserting an image in a section that will be viewed across pages and spaces (such as in a Footer section), be sure to name the image with Space Key and Page Title information, in the format below. (Don't worry about remembering this — it's noted in every section designer, as in the above example.)

spacekey:Page Title^image.png
#trackbackRdf ($trackbackUtils.getContentIdentifier($page) $page.title $trackbackUtils.getPingUrl($page))