Inline linear-gradient on a background Image

Question

I have an image with a slight black linear gradient over it to improve readablitiy

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("./images/slideshow/2.jpg");

However I am using a slideshow that only accepts divs with inline backgroundImage properties

<div
          className="slideshow-image"
          style={{ backgroundImage: `url(${slideshow2})`, repeat: "no-repeat" }}
        >

The trouble is I cannot add the linear gradient that the image had before with inline styling.

//attempt 1
const backgroundStyle = {
    backgroundImage: `url(${slideshow1})`,
    linearGradient: "(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))",
  };

// attempt 2 
style={{
            linearGradient: "(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))",
            backgroundImage: `url(${slideshow1})`,
            repeat: "no-repeat",
          }}

//attempt 3 
.slideshow-image {
 
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));

Neither of these display anything over the image. What can I try next to accomplish this?

did you consider CSS variables? ex: https://stackoverflow.com/a/68185321/8620333 — Temani Afif, Aug 12 '21 at 19:17
I tried that answer by adding `.slideshow-image::before { background: linear-gradient(360deg, green); }` But it still doesn't show anything on the image — imstupidpleasehelp, Aug 12 '21 at 21:28
no, you don't have to add pseudo element, that answer is to show you the CSS variable technique. You need to make the image url a variable that you can change inline — Temani Afif, Aug 12 '21 at 21:35
I don't understand, the imageUrl is already a variable ``url(${slideshow1})`` — imstupidpleasehelp, Aug 12 '21 at 23:01
I'm not sure how I can use a css variable while also using the inline background image — imstupidpleasehelp, Aug 12 '21 at 23:19

score 0 · Answer 1 · answered Feb 28 '23 at 16:22

You can also override an inline CSS style using !important in your CSS.

Your CSS will become

.slideshow-image{
    background-repeat: no-repeat !important;
}

and your markup could be changed slightly

<div
          className="slideshow-image"
          style={{ backgroundImage: `url(${slideshow2})`}}
        >

Inline linear-gradient on a background Image

1 Answers1