Kilian Valkhof

Forward thinking image copyrighting

Derek Powazek recently described a method of cleverly hiding a copyright message embedded in the image itself by using it as a background on a div and clipping the message at the bottom. However, There are some drawbacks regarding semantics and users without CSS. Daniel Sandler came to the same conclusion and posted an improved method using an image and a surrounding div. I’ve found a way to use just an image tag and some CSS.

The original method #

The original method was unsemantic and the image is not visible when CSS is not available. The idea however, was very clever: The image that gets downloaded has the copyright message, but a regular viewer doesn’t get bothered by it. Daniel’s improvement has the same benefits but has added semantics and no problems when CSS is not available, because there actually is an image tag in the source. However it uses an additional div. Which isn’t much of a problem, but it’s slightly superfluous (pedantically slightly, but work with me here).

Using just an image element #

CSS has one property specifically for hiding sides of an image: clip. It’s syntax is like this: clip:rect(5px 10px 5px 10px);. This clips the images, hiding 5px of the image at the top and bottom, and 10px at both sides. Unfortunately, clip only works on absolutely positioned elements so it’s of little use with elements in content. You can read more about it in this article: misunderstood CSS clip.

Another option is using a negative bottom margin, and that does work. However, we still have to hide the bottom part of the image because while the objects height is less, the full image is still visible. By using the adjacent selector we can tell the element right after the image to have a solid background, hiding the bottom part of the image. We also add position:relative to make sure the background actually gets rendered. The CSS:

img {
    margin-bottom:-61px;
}

img + * {
    position:relative;background:#fff;
}

And an example:

As you can see the copyright message is hidden and all it took were 3 CSS properties. That’s not half bad, is it? You can copy and paste the image, read the alt attribute and it’s just like any other image in your page. Except, you know, with a hidden copyright message.

Downsides #

Of course, this method has some downsides as well. Every Front-end developer’s best friend, IE6, doesn’t understand the adjacent CSS selector. So for IE6 support you’d need an extra class or extra CSS on the element itself. The background colour used to overlap the image is sub optimal as well, because it doesn’t allow for backgrounds using images.

Update: As Robert O’Rourke (below) mentioned, the element following the image needs to be high enough to hide the entire copyright message. This can be solved with a min-height on the img + * selector.

All in all #

All in all I think there are a number of scenarios for each method. On a site such as this one or Derek’s one, The method above would be best. On a site with background images or small content directly following the image (and thus unable to cover the entire bottom of the image) it’s better to use Daniel’s method.

Whenever it’s possible to absolutely position the image, clipping is without a doubt the best and cleanest solution available.