Overlap BackgroundImage With Overlay in React

user_8305219 0
Viewed 416

I wanted to have a background overlay on my background image. I wanted to achieve something on this below:

CHECK THIS IMAGE

Pls check my codesanbox also

Click here

 image: {
    backgroundImage:
      "linear-gradient(0deg, rgba(255, 0, 150, 0.3), #06a303), url(http://lorempixel.com/800/600/nature/2)",
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover",
    backgroundPosition: "center"
  },
material-ui react-hooks reactjs css
1 Answers

Specify a sold gradient, black @ about 50-60% opacity, with your background image under it. White text and some padding help the text pop.

backgroundImage:
  "linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(http://lorempixel.com/800/600/nature/2)",

enter image description here

Code

const useStyles = makeStyles((theme) => ({
  ...
  image: {
    backgroundImage:
      "linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(http://lorempixel.com/800/600/nature/2)",
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover",
    backgroundPosition: "center",
    color: "white",
    padding: "1rem"
  },
  ...
}));

Edit overlap-backgroundimage-with-overlay-in-react

user_86908570
Related