Creating Watermarks

A watermark is an image that is set in the background behind all your other content. You can make watermarks for both online and print-based output.

How to Create a Watermark

1. Create an image with the watermark you want to use. Using your graphics software, you may need to edit the image to lighten appropriately for background use.
2. Open the stylesheet you want to modify.
3. In the local toolbar, make sure the first button displays . If the button displays instead, then click it.
4. In the upper-left of the editor, make sure the drop-down field is set to .
5. On the left side of the editor, find and select the body tag.
6. From the Show drop-down list on the upper-right side of the editor, select .
7. (Optional) You can use the toggle button in the local toolbar to show properties below in a group view or an alphabetical view .
8. If you are using the grouped view, expand the Background group.
9. To the right of background-image, click .

10. Select an image file to insert. You can do this in one of the following ways.

    • Select an image already in the project by finding and selecting it in the built-in tree.
    • Click to find and select an image file outside of the project.

    Note If you want to select an image file recently inserted into your project, click the down arrow in the field next to the button, and select the file from the list.

11. If you want a specific position for the background image, click to the right of background-position and enter the appropriate command (definitions from http://www.w3.org).

    • percentage A percentage X aligns the point X% across (for horizontal) or down (for vertical) the image with the point X% across (for horizontal) or down (for vertical) the element's padding box. For example, with a value pair of '0% 0%',the upper left corner of the image is aligned with the upper left corner of the padding box. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the padding box. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding box.
    • length A length L aligns the top left corner of the image a distance L to the right of (for horizontal) or below (for vertical) the top left corner of the element's padding box. For example, with a value pair of '2cm 1cm', the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding box.
    • top Equivalent to '0%' for the vertical position.
    • right Equivalent to '100%' for the horizontal position.
    • bottom Equivalent to '100%' for the vertical position.
    • left Equivalent to '0%' for the horizontal position.
    • center Equivalent to '50%' for the horizontal position if it is not otherwise given, or '50%' for the vertical position if it is.

12. If you want the background image to repeat, click to the right of background-repeat and select one of the options (definitions from http://www.w3.org).

    • no-repeat The image is not repeated. Only one copy of the image is drawn.
    • repeat The image is repeated both horizontally and vertically.
    • repeat-x The image is repeated horizontally only.
    • repeat-y The image is repeated vertically only.
13. Click to save your work.