Use a linear gradient in a background image

Question

I use reactjs with bootstrap 4, I want to make a header similar to the image below.

I don't know how to get this same result (linear gradient + background-image)

the image link is dynamic so I use the online styles for my header, dans le

const backgroundStyle = {
    backgroundImage: `url(${getImageFromApi(movie.backdrop_path, 'IMAGE_BASE_URL')}),radial-gradient(circle at 20% 50%, rgba(11.76%, 15.29%, 17.25%, 0.98) 0%, rgba(19.61%, 21.96%, 23.53%, 0.88) 100%)`,
    backgroundRepeat:'no-repeat',
    backgroundPosition:'center center',
    backgroundSize:'cover',
    height:'85vh',
    maxWidth:"100%",
    marginTop:200
}

Thank you in advance for your help and your answers.

Check this page: https://webdevetc.com/blog/how-to-add-a-gradient-overlay-to-a-background-image-using-just-css-and-html. — Vectrobyte, Jan 25 '20 at 03:48
Does this answer your question? [Use css gradient over background image](https://stackoverflow.com/questions/16589519/use-css-gradient-over-background-image) — Vectrobyte, Jan 25 '20 at 03:49

score 0 · Accepted Answer · answered Jan 25 '20 at 05:38

You can achieve this design using :after & :before in your image tag. Please review my code carefully.

I hope you will help you. :)

Let me know further clarification.

.image {
    position: relative;
    width: auto;
    display: inline-block;
}

.image::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    display: block;
    background-image: linear-gradient(to top , currentColor 5%, transparent 30%);
}

  .image::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    display: block;
    background-image: linear-gradient(to right, currentColor 5%, transparent 80%);
}

<div class="image">
  <img src="https://placekitten.com/800/500"/>
</div>

Use a linear gradient in a background image

1 Answers1