How to create an image with color gradient in React's JSX?

Question

This is what I have so far:

homepageImage: {
    position: "relative",
    textAlign: "center",
    height: "100vh",
    backgroundImage: `linear-gradient(
      #3A8DFF,
      #86B9FF
      ), url("images/bg-img.png")`,
  },

    <div className={classes.homepageImage}>

I got the above code by referencing this Stackoverflow post, but I guess this method doesn't work with JSX? The colors with the gradient displays in the div, but the image does not appear. I can confirm the url is the correct path as I tested with an <img> tag with "images/bg-img.png" as the src and the image appears.

Would it be a better approach to create a gradient with the <img> tag instead of the <div> tag? Not sure where to go from here.

Have a look at this question because it sounds very similar https://stackoverflow.com/questions/2504071/how-do-i-combine-a-background-image-and-css3-gradient-on-the-same-element — Richard Hpa, May 19 '21 at 03:40
Thanks for the recommendation. Playing around with this: backgroundImage: `url("images/bg-img.png"), linear-gradient(#3A8DFF, #86B9FF);` Which shows the image now, but no gradient. Will keep trying! — personwholikestocode, May 19 '21 at 04:01

score 0 · Answer 1 · answered May 19 '21 at 10:03

Try this :

You need to use rgba() to specify the opacity of the color.

App.js

import React from 'react';
import './style.css';

export default function App() {
  return (
    <div>
      <h1>How to create an image with color gradient in React's JSX</h1>
      <div style={homepageImage} />
    </div>
  );
}

const homepageImage = {
  position: 'relative',
  textAlign: 'center',
  height: '100vh',
  backgroundSize: 'cover',
  backgroundImage: `linear-gradient(
      rgba(58, 141, 255, 0.9),
      rgba(134, 185, 255, 0.3)
      ), url("https://images.unsplash.com/photo-1593642532400-2682810df593?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80")`
};

Demo : Stackblitz

How to create an image with color gradient in React's JSX?

1 Answers1