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?

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.