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: