Several background images separated by comma can be applied. There is a CSS trick how we can dim an image putting a bit transparent gradient without gradient in front. div.jsx-d59481a0683473c0{
background-image: url('/imgs/headphones.jpg');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
color: black;
margin: 10px;
border: 2px solid grey;
height: 200px;
} background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('/imgs/headphones.jpg') div.jsx-62a49b2c70903669{
background-image: url('/imgs/headphones.jpg');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
color: black;
margin: 10px;
border: 2px solid grey;
height: 200px;
background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('/imgs/headphones.jpg')}
const Div1 = styled.div`
background-image: url('/imgs/headphones.jpg');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
color: black;
margin: 10px;
border: 2px solid grey;
height: 200px;
`
const Div2 = styled(Div1)`
background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('/imgs/headphones.jpg');
`