Styled Component에 배경이미지 url 삽입

JavaScript React Tutorial

2023-03-07

Emotion을 이용해 Styled components(CSS-in-JS)를 적용하면서 컴포넌트 안에 배경 이미지를 넣는 작업을 진행하면서 발견한 방법들을 나열해본다.

1. url 바로 입력

/public폴더 아래에 위치해있으므로 굳이 상대좌표를 따라가지 않고 assets/로 url에 접근 가능하다.

import styled from "@emotion/styled";

export const Container = styled.div`
  background-image: url('assets/background.png');
  background-size: 100%;
`

2. import -> props 로 이미지 전달

리액트 props를 연습할 겸 이미지를 프롭으로 넘겨주는 방식으로도 진행해봤다.

// index.js
import backgroundImg from'../public/assets/background.png'
import { Container, Content } from '../styles/layout.js';

export default function MyPage() {
  return (
    <Container image={backgroundImg}>
      <Content>Here's some content</Content>
    </Container>
  );
}

// layout.js
import styled from "@emotion/styled";

export const Container = styled.div`
  background-image: url(${props => props.image.src});
  background-size: 100%;
`