<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;
  -webkit-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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js