1

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"
  },
Drew Reese
  • 103,803
  • 12
  • 69
  • 96
Joseph
  • 5,548
  • 14
  • 57
  • 125
  • So I've taken a look at your sandbox and I see an a color gradient overlaying an image. What is the issue? Please be specific. – Drew Reese Nov 10 '20 at 02:47
  • @DrewReese. I wanted it to cover the whole image. and put an opacity because I'll be putting a text on it. So the text needs to be seen clearly. I hope you got what i mean. Thank you – Joseph Nov 10 '20 at 02:53
  • I guess I don't understand then. In your sandbox the overlay and image occupy the same space, so the image is covered. Are you trying to get the "login form" to look like a modal as it appears to be in the linked image above? – Drew Reese Nov 10 '20 at 02:56
  • Hi. I've edited my codesandbox. I put a `

    Text Here...

    `. I think a black background color overlay with an opacity would be good. What do you think?     – Joseph Nov 10 '20 at 02:59
  • Yes, that is typically how the overlay would work. Are you saying you *don't* want the red(ish)-green gradient overlay? Sorry, I still don't understand if you are saying what you currently have isn't working, of if it is or isn't what you are going for, or something else altogether. – Drew Reese Nov 10 '20 at 03:08
  • @Drew Reese. i dont like how my gradient looks.i want an overlay black background with an opacity. you can fork my codesandbox so i can see how it looks. thank you – Joseph Nov 10 '20 at 03:16

1 Answers1

0

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

Drew Reese
  • 103,803
  • 12
  • 69
  • 96
  • Great Job Drew. Thank you – Joseph Nov 10 '20 at 03:53
  • Hi, could you help me with this question? https://stackoverflow.com/questions/68601962/selection-checkbox-in-react-using-hooks?noredirect=1#comment121238308_68601962 – Joseph Jul 31 '21 at 14:31