Google Blogoscoped

Friday, May 2, 2008

Adding a Watermark to a Google Docs Document

Google recently added a CSS (Cascading StyleSheet) editor to their Google Docs document editor. To edit the stylesheet, create a new document or open an existing one and pick Edit -> Edit CSS from the menu. Google put up a Docs-specific CSS tutorial to guide you through some of the details.

For instance, if you want to create a kind of watermark – in the sense of an image printed somewhere on the page that is not selectable by left-clicking on it – you can follow these steps:

  1. Create a new document which will hold your image resources. You need this as you can't reference external images in Google's CSS (like those on Flickr, or your own server; perhaps Google feared security issues with external files during this release). Click New -> Document in the Google Docs explorer and name the document something like Docs Image Resources.

  2. Upload necessary graphics into this container document. I'm uploading this blog's logo, for instance. Now switch to the HTML source of the page by clicking Edit -> Edit HTML in the Docs editor menu. Look for the image you added (I'm sub-titling every image so that it will be easy to find in the source) and copy it's relative image URL to the clipboard, like this one:

  3. Create a new (or existing) document where you will add the watermark by referencing the file you uploaded. Switch to the CSS editor – Edit -> Edit CSS – and enter the following CSS (replace the image URL with the one you copied yourself):

    body {
      margin: 100px;
      background-image: url('File?id=ajfjf92t...etc...');
      background-repeat: no-repeat;
      background-position: 90% 50px;

    This will add a right-positioned logo, as shown in the screenshot.

You can now create a copy of this document as a kind of template whenever you're creating a new document, as the CSS will be copied with it. And that's the big problem about this approach, too; until the day Google allows you to reference a stylesheet that is somehow saved in a repository external to the copied document, you can't change the CSS for all documents easily. You'd have to go to every single CSS you copied and make the changes, which would be time consuming. You can't even easily change the watermark image you copied because when you upload a changed pic to your repository document, it will generate a new file identifier, and you'd have to manually replace it in all CSS definitions of your docs (though maybe someone of you knows a workaround for this).

Until the day Google does offer better CSS handling, stylesheet editing for docs may be the next best thing to using inline styles right in the HTML, but it's still cumbersome. It works well if each of your documents has a unique styling, but it does not work great when you have multiple documents and you'd like to apply (and perhaps later redesign) the same layout for all of them.


Blog  |  Forum     more >> Archive | Feed | Google's blogs | About


This site unofficially covers Google™ and more with some rights reserved. Join our forum!