how to make a linear gradient consistent through scrolling down a page

Question

I have the following html page:

<!DOCTYPE html>
<html lang="en">

<head>

    <style>
        html,body {
        height: 100%;
        }

        body {
        margin: 0;
        }
    </style>

</head>

<body style="margin: 0 auto;text-align:center;background: linear-gradient(to bottom, #243B55, #141E30);">

    <p style="font-family: Montserrat; font-style: normal; font-weight: bold; color: rgba(255, 255, 255, 0.92);font-size: 30px;">Text</p>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>

    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>

    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>

    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>

    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>

    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>

    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>

    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>
    a 
    <br>

    a 
    <br>

    
</body>

</html>

I know the CSS I've added in the style tags is responsible for making the linear gradient 'repeated' as you scroll through the page, but is there a way to make the linear gradient background consistent throughout the scrolling, without having to remove the existing CSS (I'm open to adding CSS), since I know I'll need the existing CSS for something else?

you only need to add html {min-height;100%} to make sure it works fine even with small content. related; https://stackoverflow.com/a/48503609/8620333 — Temani Afif, Jun 27 '20 at 16:43

Marik Ishtar · Accepted Answer · 2020-06-27T15:01:41.947

You need to make the height of the element you want to set the background, equals to the full height of the document

Your idea was right, you need just to change

If the property height: 100%; is really necessary you can add a wrapper and add it to it.

// from
html,body {
   height: 100%;
}

//to
html,body {
   height: auto;
}

<!DOCTYPE html>
<html lang="en">

<head>

    <style>
        html,body {
          height: auto;
        }
        
        .wrapper {
          height: 100%;
        }

        body {
          margin: 0;
        }
    </style>

</head>

<body style="margin: 0 auto;text-align:center;background: linear-gradient(to bottom, #243B55, #141E30);">

    <div class="wrapper">
      <p style="font-family: Montserrat; font-style: normal; font-weight: bold; color: rgba(255, 255, 255, 0.92);font-size: 30px;">Text</p>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>

      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>

      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>

      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>

      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>

      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>

      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>

      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>
      a 
      <br>

      a 
      <br>
    
    </div>

    
</body>

</html>

how to make a linear gradient consistent through scrolling down a page

1 Answers1