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-1665987938{
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-926303405{
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');
`