0

I have a question about gradient in react js. when I use a gradient color it's not look like work correctly.

can someone explain to me why this is hapenning?

when I use a gradient color for my body this happening:enter image description here and it's my code:

body {
  background-image: linear-gradient(to right top, #baac39, #e78521, #ff444b, #ff0092, #c512eb);
}

I try it with a lot of gradient code but always this is happening. but when i add a "height" it's work correct and show me this:enter image description here it's my new code :

body {
  background-image: linear-gradient(to right top, #baac39, #e78521, #ff444b, #ff0092, #c512eb);
  height: 1000px;
}

why this happening?

and it's correct i use "height" for fix it?

Mehrnaz
  • 1
  • 3
  • if i get to the html 100% height it's work too. (html { height : 100%; } ) and then delete a height of body. but i still don't know why it's look like this. – Mehrnaz Jun 26 '23 at 12:56

1 Answers1

-1

Try background-repeat: no-repeat;

SeyMi
  • 94
  • 4
  • when i use this code before my gradient color, i dont have a color whole page it just top pf the page. – Mehrnaz Jun 26 '23 at 11:58
  • because you don't have any content in the `body` element, you should put some contents inside the `body` or specify a `height` which is a bad idea. – SeyMi Jun 26 '23 at 13:17
  • if i have a just one element in my page it's look like bad. sometimes we don't have a lot of element in the one page. – Mehrnaz Jun 26 '23 at 16:32
  • You can use `min-height: 100vh;` on the body. – SeyMi Jun 26 '23 at 17:03