How do I position a link relatively to background-image with background-size contain?

dabblet.css

/**
 * How do I position a link relatively to background-image with background-size contain?
 */

html, body {
    height: 100%;width:100%;display:table;
}

body {
    background: #fff url(http://www.apple-weblog.de/wp-content/uploads/2007/10/Leopard.jpg) no-repeat center center;
    background-size: contain;
    margin: 0;
    display:table-cell;
    vertical-align:middle;
}

.clickable-area {
    border: 1px solid red;
    margin: -7.5% 0 0 -10%;
    margin:auto;
    width: 20%;
    height: 15%;
    display:table;
}
a {
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	}

dabblet.html

<div class="clickable-area">
	<a href="#">click </a>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}