React에서 배경을 깔쌈하게 넣어보자

2021. 7. 12. 18:00프론트엔드/React.js

728x90

아 솔직히 말하면 글 쓸 컨텐츠가 없다.
요새 좀 공부에 흥미가 잘 안생기기도 하고...

그래도 나는 익숙하지만 다른 사람들에게는 도움이 될만하겠다 싶어서
한번 써보았다


결론부터

// BackgroundBox.tsx
import { makeStyles } from '@material-ui/core/styles';

import background from "./img/bg.png";

const useStyles = makeStyles({ 
  backgroundStyles: {
    position: "fixed" as const,
    width: "100%",
    height: "100%",
    filter: "blur(5px)",
    backgroundSize: "cover",
    backgroundPosition: "center",
    zIndex: 0,
  }
});

export default function BackgroundBox() {
  const classes = useStyles();

  return (
    <div className={classes.backgroundStyles} style={{ backgroundImage: `url(${background})` }} />
  )
}

// App.tsx
import BackgroundBox from '파일경로';

function App () {
  return (
    <div>
      <BackgroundBox />
      {... 기존 코드}
    </div>
  )
}

만약 material-ui를 사용하지 않는다면, 일반 css파일을 만들어서 똑같이 클래스를 만들면 된다.

// BackgroundBox.css
.backgroundStyles {
    position: "fixed",
    width: "100%",
    height: "100%",
    filter: "blur(5px)",
    backgroundSize: "cover",
    backgroundPosition: "center",
}

// BackgroundBox.tsx
import './BackgroundBox.css';
import background from './background.png';

function BackgroundBox() {
  return (
    <div className="backgroundStyles" style={{ backgroundImage: `url(${background})` }} /> 
  )
}

 

끝!

css 요소를 살펴보자.

position: fixed => 부모의 위치로부터 독립적
width: 100%, height: 100% => 전체 화면
filter: "blur(5px) => 블러처리
backgroundSize: "cover" => 화면에 꽉 차도록 자동으로 늘림 (비율 유지. 사진이 안 찌그러지고 잘림)
backgroundPosition: "center" => 배경이 중앙에 오도록 함