JSFiddle - React, Tailwind, and code Playground

by GCyrillus

HTML

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

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;
    /* option 2 
    
        background: #fff url(http://lorempixel.com/256/160/nature/1) no-repeat center center;
    	background-size: 100% 100%; not at its best but keep exact proportion with HTML element
    */
}

.clickable-area {
    border: 1px solid red;
    margin: -7.5% 0 0 -10%;
    margin:auto;
    width: 20%;
    height: 15%;
 
}
a {
position:relative;
left:-10%;
top:-15%;
    background:rgba(0,0,0,0.5);
	}