DEV Community

Domingos Manuel Capitango
Domingos Manuel Capitango

Posted on

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

Top comments (2)

Collapse
 
durbonca profile image
Manuel Duran

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

Collapse
 
rkc98 profile image
Rahul Kumar Choudhary

you can use something like this

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