How to add linear gradient color and image url at same time in reactjs inline styling-CodePudding

I'm trying to a background image to my component based on component props. At the same time I want to add linear gradient to the image

I have used this code

 <div
      className="past-event-card"
      style={{
        backgroundImage: `url(${props.imgURL}),linear-gradient(
            0deg,
            rgba(44, 7, 5, 0.6) 0%,
            rgba(44, 7, 5, 0) 100%
          )`,
      }}
    >

but the problem is that when I do this only the image appear without the gradiant. It's probably a simple syntax fix but I'm new in react and I couldn't solve it myself

This is the complete code if you need it

PastEventCard.jsx

    import React, { useState } from "react";
import { Link } from "react-router-dom";
import "./PastEventCard.css";

function PastEventCard(props) {
  return (
    <div
      className="past-event-card"
      style={{
        backgroundImage: `url(${props.imgURL}),linear-gradient(
            0deg,
            rgba(44, 7, 5, 0.6) 0%,
            rgba(44, 7, 5, 0) 100%
          )`,
      }}
    >
      <h3 className="card-title">{props.title}</h3>
      <p className="card-subtitle">{props.subtitle}</p>
      <p className="card-description">{props.description}</p>
    </div>
  );
}
export default PastEventCard;

App.jsx

import React, { useState } from "react";
import { Link } from "react-router-dom";
import "./PastEventSection.css";
import PastEventCard from "./PastEventCard";
import capacitorCardImg from "../assets/capacitor-card-img.jpg";
import theGoldenRecordCardImg from "../assets/the-golden-record-card-img.jpg";
import assiutCollageFairCardImg from "../assets/assiut-collage-fair-card-img.jpg";

function PastEventSection(props) {
 <section className="past-event-section">
        <PastEventCard
          title="Assiut Collage Fair"
          subTitle="#know_your_future"
          description="lorem50"
          imgURL={assiutCollageFairCardImg}
        />
        <PastEventCard
          title="TEDxYouth@AssiutSTEM2020"
          subTitle="#the_golden_record"
          description="lorem50"
          imgURL={theGoldenRecordCardImg}
        />
        <PastEventCard
          title="TEDxYouth@AssiutSTEM2019"
          subTitle="#capacitor"
          description="lorem50"
          imgURL={capacitorCardImg}
        />
    </section>
  );
}
export default PastEventSection;

CodePudding user response：

You have to change the order in the style prop: gradient first, image last.

 <div
     className="past-event-card"
     style={{
         backgroundImage: `linear-gradient(
             0deg,
             rgba(44, 7, 5, 0.6) 0%,
             rgba(44, 7, 5, 0) 100%
         ),url(${props.imgURL})`,
     }}
>