get visible portion of background image of element in javascript

<div id="element" style="background-image: url('background.jpg'); background-size: cover; background-position: center;"></div>
127 chars
2 lines

index.tsx
const element = document.getElementById('element');
const rect = element.getBoundingClientRect();

const visibleWidth = rect.width;
const visibleHeight = rect.height;

const backgroundWidth = element.offsetWidth;
const backgroundHeight = element.offsetHeight;

const visibleLeft = (backgroundWidth - visibleWidth) / 2 - rect.left;
const visibleTop = (backgroundHeight - visibleHeight) / 2 - rect.top;

const visibleRight = (backgroundWidth + visibleWidth) / 2 - rect.right;
const visibleBottom = (backgroundHeight + visibleHeight) / 2 - rect.bottom;

console.log('Visible part of background image:');
console.log('Left:', visibleLeft);
console.log('Top:', visibleTop);
console.log('Right:', visibleRight);
console.log('Bottom:', visibleBottom);
745 chars
21 lines