Is there a neat way to get attribution for a background image in the presentation layer?

Question

I have a CC-BY image that I'm using as a background, brought in by CSS. This image is purely there for its looks, and definitely not content. I need to put attribution on this image somewhere, and obviously it would be nicest to make this attribution a link to the kind person who provided the image. However, I don't really want to put link text into my HTML as that breaks the separation of actual content and presentation (the attribution link is really part of the presentation, I would say, since if you viewed the page without the background image, you wouldn't really want to see it).

Is there any way I can get my separation of presentation and content right here?

My current code for this looks something like

<div class='backgrounded'>
  <div class='content'><h1>Some stuff here</h1></div>
  <div class='attribution'>
    Image from <a href='http://example.com/image'>Lovely CC-BY person</a>
  </div>
</div>

And the CSS:

div.backgrounded {
    background: url(/images/an_image.jpg);
}
div.attribution {
    color: #ffffff; 
    float: right;
}

This has the attribution in the content, where I'd rather not have it.

Other things I've considered include:

• Putting the attribution in the image itself. This solves the code separation problem, but my image is a nice wide one positioned to the left so there is enough background for a wide browser window. The bottom right of the image is almost always out of view. I don't see how I can make this attribution a link.

• Making an image containing the attribution text and putting that where the current attribution is, again in the background, but on top I guess I could make it a link using JavaScript. This seems like a lot of fiddling about.

Is there a way out of this where my image is only referred to in the CSS? Or failing that, what's the best way to keep things nicely separated, so that, for instance, the image could be replaced without editing the HTML?

Fishbolt

+1 Interesting, however I'd say that the image is part of your content. Even if it's a background image it's still part of your content so there wouldn't be any mixing if you added the attribution link in your HTML. – Quisling

Hi JohnP! The problem is that the image isn't actually in my content - it's only brought in by the CSS, so currently the HTML part has the attribution, but no actual image, and the CSS knows the image, but not the attribution, and neither really wants to be there without the other! – Fishbolt

Answer 1

You can leave a comment in the CSS itself:

div.backgrounded {
    background: url(/images/an_image.jpg); /*Image provided by [name]*/
}

Then the attribution is in the CSS, but it won't be visible on the actual page.

Accouchement

This was my first thought, but feel that it may conform with the letter of the license but only be visible to us markup readers who are most definitely not modal and thus bumps up against the CC-BY spirit. My solution here to avoiding guessing by asking the creator works whichever approach the OP takes. – Espinal

Seems a bit mean though, doesn't it? Ideally I'd like the attribution readable to people looking at the site itself rather than just in the source! I think I'm going to have to accept that attribution has to go in the HTML content. – Fishbolt

Answer 2

The relevant bit of the CC-BY license (readable version) is

Attribution — You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work).

Which leads me to believe that unless a manner is specified your discretion is acceptable. I think it eminently reasonable to do for a background image as is done on this page: at the bottom you will find a discreet

 site design / logo © 2011 stack exchange inc;

which easily conforms to the spirit of CC-BY. Having put a number of creations out on the web as CC-BY, my personal intent was "just please don't pretend that you created it", which I think is a common use of that license.

Since you must, by definition, have the attribution information, take the easy route and just ask the creator "is this ok?".

Espinal

I have indeed dropped the creator of the original photos a note, it's only polite! This doesn't solve the problem I'm trying to get at, which is the separation of concerns. The ideal would be to be able to change the background image, which is just presentation (in my view) without having to change the HTML at all. I suspect there is no really good solution to this. – Fishbolt