Using CSS with React

#1

Hello,

I am having trouble with using a linear-gradient in my React App. I am using VSCode and the Firefox browser.

The only CSS code in my App right now is this:

:root{
  --green: rgb(20.8, 36.9, 23.1);
}

body {
  text-align: center;
  background: linear-gradient(35deg, black, var(--green)  , green,  black );
}

The result is this:

image
image1440Ă—730 49.2 KB

I have been trying to stop the repeating gradient and get one complete gradient. Where am I going wrong and how can I fix it?

#2

Did you try background-repeat: no-repeat.

It won’t fill the page, just stop the repeat. For it to fill the page it has to have enough content or have a height set.

1 Like
#3

Yes that did stop the repeat.

I put some lorem ipsum text there to see if it still repeated after I removed the no-repeat and it filled the screen.

Thanks for the help :slight_smile:

#4

Hey there! @Hello_Forum if you do want to make the image bigger you can use the “background-size” in CSS and set it to “contain” or you can set it to your own custom parameters. Here’s an example below:

 background-size: contain;

that should fill out the box that it’s in (very helpful if using flexbox or grid)

Hope this helped!
Happy coding! :slight_smile:

#5

@Cy499_Studios:

I tried the background-size: contain and it made the repeating size bigger, but I still had the problem of it repeating.

Thanks for trying to help though :slight_smile:

#6

@Hello_Forum
No problem, BTW I was trying to supplement the other solution, I replied on the basis that you had already implemented the “no-repeat” in your code.

Sorry for any inconveniences or misunderstandings LOL :joy:

#7

No worries,

This stuff happens in coding, lol :laughing:

#8