I'm facing an issue trying to incorporate a background image for a div along with a color overlay. In plain CSS, the code would typically look like this:
.backgroundImage {
background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
url('../img/backgroundimage.jpg');
width: auto;
height: 40vh;
background-size: cover;
}
However, I encountered difficulties with this CSS method due to the dynamic nature of the component I am constructing (different images, text content, etc.).
Despite attempts to import an image and replicate the CSS approach within my style object, I struggled to achieve the desired gradient overlay.
As a workaround, I experimented with wrapping my div in another container div and applying the gradient there, but that too proved unsuccessful...
If anyone has a solution to this puzzle, I would greatly appreciate your insights!
Cheers!
const wrapperPictureBox = {
background: "linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73))"
};
const pictureBox = {
background: `url(${backgroundimage})`,
height: "40vh",
backgroundSize: "cover"
};
<div style={wrapperPictureBox}>
<div style={pictureBox}>text</div>
</div>