Kilian Valkhof

Front-end & user experience developer, Jedi.

Forward thinking image copyrighting

CSS & HTML, 11 March 2008, 3 minute read

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:

Derek's Dog

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 ajacent 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.

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

  1. Robert O'Rourke

    It’s a nice idea but there’s another drawback you haven’t mentioned: the element immediately following the image has to be a certain height otherwise when you shrink the text or have a shorter paragraph/caption it becomes visible.

    You’d need either a fixed height around the image with overflow: hidden; or set min-height on the img + * element.

  2. You’re absolutely right. I though I added that in the article as well but I obviously forgot. Thanks! :)

  3. It’s safer is to use style .copyrightimage {position:relative;margin-bottom:-76px;background:#fff} and html then this will work in IE6 and 7. Unfortunately, have to additional div element :/

  4. […] (RSS) Curiosa manera de incluir una nota informativa sobre la propiedad de una imagen y ocultarla mediante CSS. […]

  5. I should’ve known you’d have something to say about Derek’s rather crufty and unsemantic method, Kilian. ;) Nice work. I can’t wait for IE <8 to be ancient history on the public Web… Maybe in five years? I’ll keep hoping.

    I have another objection to this technique, and it’s that by adding the copyright info as a “footer” to the image, it’s trivially easy to strip it out and use the image illegally. It also adds a not-insignificant amount of bytes to each and every file it’s applied to, which doesn’t sit well with me (even if it’s added dynamically, it’s still inflating the page-size for all users, most of whom probably wouldn’t steal the images).

    I suppose having a big (and probably unexpected) copyright message appearing at the bottom of an image one had stolen would deter most casual copyright infringers, but not, I suspect, anyone with sufficient determination.

    If an image is really important enough to the author/owner to protect it in such a way, then I am of the opinion that there are far more elegant and harder-to-circumvent solutions (subtle watermarking, steganographical storage of identifying information such as the user’s IP, etc. – combined with a clear deterrent-warning that images carry such protection).

    In any case, hooray for de-crufting it! ;)

  6. The copyright notice on the image shows on this page in both IE7 and FF (i.e it is not hidden). Is it me only?

  7. V T K, you’re right! The CSS for this got removed when I implemented this theme. I’ll add it back later :)

Be the first to know about new releases!

Newsletter subscribers will be the first to know about new apps I release or new articles I write, here or elsewhere.

Low-volume. I will only email you when I have something exciting to share.