JSFiddle - React, Tailwind, and code Playground

by SerGen

HTML

<div id="omg"><div id="kek"></div></div>
<div id="lol">890</div>

CSS

html,
body {
	height: 100%;
}
#omg {
	position: relative;
	overflow: hidden;
	height: 100%;
	width: 100%;
}
#kek {
	width: 60%;
	height: 100vh;
	background-color: lightyellow;
	background-repeat: no-repeat;
	background-attachment: fixed;
	position: absolute;
	z-index: 100;
}

#lol {
	transform: translateZ(0);
	opacity: .99;
	animation: lol 1s linear infinite alternate;
	z-index: 101;
	position: absolute;
	top: 0;
}
@keyframes lol {
	0% {
		transform: translateZ(0) rotateX(0deg);
	}
	100% {
		transform: translateZ(0) rotateX(360deg);
	}
}

JavaScript

var c = document.createElement('canvas');
var cx = c.getContext('2d');

c.width = 531;
c.height = 531;

cx.fillStyle = 'red';
cx.fillRect(Math.floor(c.width / 2), 0, 1, c.height);
cx.fillRect(0, Math.floor(c.height / 2), c.width, 1);

kek.style.backgroundImage = `url(${c.toDataURL()})`;
kek.style.backgroundPosition = `left ${kek.getBoundingClientRect().left + kek.offsetWidth - c.width + 5}px bottom 0`;

window.onresize = function () {
	kek.style.backgroundPosition = `left ${kek.getBoundingClientRect().left + kek.offsetWidth - c.width + 5}px bottom 0`;
};