Create-react-app: How to get CSS background images with styled-components?

[cesarvarela]

This basic code doesn't seem to be working, there are no compilation errors or anything.

const Content = styled.div`
    border: 1px solid #000;
    background-image: url(./img/bg.gif);
    width: 2000px;
    height: 2000px;
`

Thanks in advance!

[mjsisley]

The following should work:

import styled from 'styled-components';
import img from './img/bg.gif';

const Content = styled.div`
    border: 1px solid #000;
    background-image: url(${img});
    width: 2000px;
    height: 2000px;
`;

[saber-salhi]

how i can make background image in each div

[osvaldoalvaradodev]

How i made this with CSS style in react ? :s

[Sergioamjr]

You can do with dinamic props, like that

const Content = styled.div`
    background-image: url(${props => props.img});
`;

<Content img={ImagePath} />