<div id='root'></div>
.background {
background-color: white;
width: 100vw;
height: 100vh;
}
.seoul {
font-size: 4rem;
margin: 0;
font-weight: 900;
letter-spacing: 1rem;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
color: white;
background-clip: text;
background-clip: text;
color: transparent;
background-image: url(https://i.namu.wiki/i/vzQIsovYmymvt84FWS9hhAS3Qva_O31fczg3ErMrSQrSgnJ9h3oQDf3kVo5M6aD1Q05-etvQRlqc3dnurUczXw.webp);
background-size: cover;
}
function App() {
return (
<div>
<div className="background">
<p className="seoul">SEOUL</p>
</div>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'))
View Compiled
This Pen doesn't use any external CSS resources.