-2

I don't know a lot about coding and this is actually a school assignment. I want to use position:fixed while my background is gradient but when I use position:fixed my background gradient disappears.

body{
      height: 92vh;
      margin-top: 60px;
      width: 100%;
      /*position: fixed; Probem when added*/
      background-image: linear-gradient(rgb(204, 63, 142), rgb(9, 78, 195));
    }

I guess it has a problem with background-image

M_Khavari
  • 1
  • 1

2 Answers2

4

Can this solve your problem: instead of position: fixed; try background-attachment: fixed;

body{
  height: 92vh;
  margin-top: 60px;
  width: 100%;
  /*position: fixed;*/
  background-attachment: fixed;
  background-image: linear-gradient(rgb(204, 63, 142), rgb(9, 78, 195));
}
<body>
</body>

And yes see @david-ngumbu answer to have a better specification for the linear gradient ;)

source: Fixed gradient background with css

zerbene
  • 1,249
  • 2
  • 7
  • 21
0

I just wanted to add to @zerbene's answer You also have to specity the direction of the linear gradient for example linear-gradient(to bottom, rgb(204, 63, 142), rgb(9, 78, 195)) will set the gradients direction from top then to bottom example 2: linear-gradient(to right, rgb(204, 63, 142), rgb(9, 78, 195)) it will set the linear-gradient from left to right. You can also add degrees to you linear gradients like this linear-gradient(45deg, rgb(204, 63, 142), rgb(9, 78, 195)).

David Ngumbu
  • 134
  • 9