<div class="divOverlay">
<div class="div-overlay-content" >
<div class="pointer" ></div>
</div>
</div>
I have a unique layout where there is a div with a background image and a pointer that remains centered. The challenge lies in dynamically moving the background image to different positions by adjusting the specified properties.
background-position: 0% 0%;
For instance, setting it to 50% 50% aligns the center of the image with the central pointer. However, I am seeking a solution for corner scenarios where values like 0% 0% should position the top left corner of the image at the center with white space around it.
Is there a way to achieve this using CSS alone, without altering the actual image by adding additional whitespace?
Visit this link for a live demo on jsfiddle https://jsfiddle.net/mkd914gf/21/
Below is the relevant CSS code:
.divOverlay {
height: 200px;
width: 200px;
position: fixed;
z-index: 1;
bottom: 0;
left: 0;
overflow-x: hidden;
}
.div-overlay-content{
height: 100%;
width: 100%;
background-image: url(https://topdrawer.aamt.edu.au/var/aamt/storage/images/media/tdt/patterns/p_gt_t3_e1_a1_fig1/278788-1-eng-AU/P_GT_T3_E1_A1_fig1.jpg);
background-position: 0% 0%;
}
.pointer {
left: 50%;
top: 50%;
background-color: red;
position: absolute;
width: 10px;
height: 10px;
background-size: contain;
background-repeat: no-repeat;
}