background

바탕화면을 두고 위에 구현해야는 방법에 대해서 알아보겠습니다.

먼저 &:before를 사용하여 Container의 시작부에 img를 넣어주겠습니다.

아래 코드를 참고해보겠습니다.

:after와 :before에는 content: 를 적어줘야합니다.

position은 absolute로 해준뒤 부모인 Container에게 relative를 설정해줍니다.

top, left, right, bottom 를 0으로 주면서 틈이 없게 만들어 줍니다.

마지막으로 z-index를 -1을 설정해주면서 가장 아래로 설정해줍니다.

---

코드

import React from "react";
import styled from "styled-components";


function Home() {
  return <Container>home</Container>;
}

export default Home;

const Container = styled.div`
  min-height: calc(100vh - 70px);
  padding: 0 40px;
  position: relative;
  color: white;
  font-size: 300px;

  &:before {
    background: url("https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940")
      center center / cover no-repeat fixed;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
`;