How do I... use CSS to watermark photos on my Blogger blog?

Welcome to the first of what I hope to be a weekly column answering your questions regarding blogging, social media, and anything internet related. Today's question is from Julie, who wants to be able to watermark photos posted to her Blogger blog without actually altering the original image. To do that, we're going to use CSS.

The first thing you need to know about watermarking photos is that there is no perfect method. The method we are going to use will prevent people from right-clicking and saving your photos -- all they'll get will be a mostly transparent image with your name or logo on it -- but anyone who is really determined will still be able to take your photo by digging through your source code for the direct url. Watermarking your photos directly, using PhotoShop or another image manipulation program, means you have to choose between placing the watermark over important parts of the image (like a face), or placing it somewhere that could be cropped or airbrushed out. The honest to God truth is this: if you place your photos on the internet there is nothing you can do to stop the truly determined from taking them. If you want to keep your photos completely safe, the best option is to print them out, stick them in a scrapbook, and keep it on your coffee table.

However, for those of us who choose to accept the risks so that we can easily share photos with friends and family, don't let perfect be the enemy of good. If you don't want to directly alter your photos but still want them somewhat protected, CSS isn't a bad option.

I was hoping to find a simple way to alter Julie's blog's stylesheet just once and have all of her photos automatically watermarked, but it turns out to be a little more complicated than that. What we're going to do is to create a space with our photo as the background image, and then place the watermark image over that. It's going to mean editing HTML every time we post a photo, but be brave, it's not that hard.

The first thing we need is an image to post. Here's mine:



You need to know the dimensions of your photo, which you can find out by right-clicking and choosing "Properties." This photo is 400x267.

Next we need a watermark image. Open any photo editing software (we're going to assume PhotoShop) and create a new transparent image that is approximately the same size as the photos you usually post. The simplest way to create a nifty watermark effect is to write your name in white text in the corner of the image. Pick a font you like and make sure it's big enough to see. Drop the opacity of the text layer to about 40%. In PhotoShop, right click the text layer and choose Blending Options. In that dialog you can play with the drop shadow and bevel and emboss until you have something you like. Save as a .png (to preserve the transparency of the lettering) and save. Here's mine:



I know you can't see it very well right now, but it will show up much better on the photo. You may want to create a watermark for landscape aligned photos and one for portrait aligned, and if you're feeling extra spunky you could make another set with black text to go over lighter photos. But that's all optional; you can just use this one for everything.

You'll need to upload your watermark image somewhere, and write down the url to keep it handy. You're going to need it later.

Now, go into Blogger and start writing your post. Go ahead and insert your photo into your post however you normally do it. Now choose the "Edit HTML" tab. The HTML for your photo should look something like this:

< a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://gallery.usr-bin-mom.com/d/47878-2/2008-08-16-002.jpg">< img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="http://gallery.usr-bin-mom.com/d/47878-2/2008-08-16-002.jpg" alt="" border="0" />< /a>

The part I have bolded there is your image's url. What you need to do is copy that url, and replace it with the url of your watermark image:

< a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://gallery.usr-bin-mom.com/d/47878-2/2008-08-16-002.jpg">< img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="http://usr-bin-mom.com/images/watermark.png" alt="" border="0" />< /a>

Now, it's as though you were posting your watermark image as a photo in your blog. All we have left to do is insert your actual image in the background behind the watermark. See the part of the HTML code that says "style="? That's where we're going to put your image url, after we wrap it in this tag:

background-image: url(http://gallery.usr-bin-mom.com/d/47878-2/2008-08-16-002.jpg);

Watch:

< a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://gallery.usr-bin-mom.com/d/47878-2/2008-08-16-002.jpg">< img style="background-image: url(http://gallery.usr-bin-mom.com/d/47878-2/2008-08-16-002.jpg); margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="http://usr-bin-mom.com/images/watermark.png" alt="" border="0" />< /a>

One more thing. We want to make sure that our watermark image is exactly the same size as the photo we wanted to post, so let's add in height and width tags. Remember that our photo was 400x267?

< a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://gallery.usr-bin-mom.com/d/47878-2/2008-08-16-002.jpg">< img style="background-image: url(http://gallery.usr-bin-mom.com/d/47878-2/2008-08-16-002.jpg); margin: 0pt 10px 10px 0pt; float: left; cursor: pointer;" src="http://usr-bin-mom.com/images/watermark.png" alt="" border="0" width="400" height="267"/>< /a>

And this is the result:



To recap, to post a photo with the watermark over it you just have to:

1. Insert your photo into your post.
2. Go to the Edit HTML tab.
3. Wrap your photo's url in the background-image tag and move it to the "style" like this: style="background-image: url(http://gallery.usr-bin-mom.com/d/47878-2/2008-08-16-002.jpg);"
4. Replace your photo's url in the "src" with your watermark's url.
5. Add height and width tags

Voila! Instant watermark, and anyone who tries to right-click and save your photo will get nothing but your watermark image. Try it!

Sorry, you must be registered and logged in to comment or read comments on this entry. Unregistered users are only allowed to comment on public entries less than two weeks old.