CSS background image with styled-components

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

Comments

[Manuel Duran]

what about if do we want the img was a props of the component? can be dynamic?

[Rahul Kumar Choudhary]

you can use something like this

background-image: ${(props) =>
url(${require(../images/${props.backgroundImage}).default})};