0

As the title says I am trying to add a gradient background to the one page on my website. I am currently doing this in CSS:

body {
  background: rgb(85,205,252);
  background: linear-gradient(45deg, rgba(85,205,252,1) 0%, rgba(255,255,255,1) 35%, rgba(247,168,184,1) 100%);
}

But doing it this way makes the gradient jagged and not very smooth.

View on JSFiddle

It should be looking like this Screenshot of page with proper background

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Iris
  • 1

1 Answers1

1

This is because the gradient is repeating over and over. It is doing this as it is the same size as <body>, which is actually very small as there is only that one .intro element taking up space within it.

You can fix this by stopping the background from repeating, and making the body the full height of the window at minimum, like so:

body {
  min-height: 100vh;
  background-repeat: no-repeat;
}

Edit: technically the 'no-repeat' is redundant when using a gradient background, as it will always fill the height provided the height is at or above 100vh.

However I would leave it there anyway as good practice just in case the background ever changes to an image; or for edge cases where the min-height may get overridden.

harryburk
  • 116
  • 1
  • 5