htmlcssbackground-attachmentrepeating-linear-gradient

How do I make local attached repeating linear gradients

I've recently been trying to make a text area that uses a repeating linear gradient to separate lines, however, the gradient does not attach to the textbox when I'm scrolling. Am I doing something wrong?

By the way, here's the code:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div class="TextareaWrapper"><textarea id="Text" cols="1500"></textarea></div>
  </body>
</html>
<style>
  #Text
  {
    background: url("https://www.linkpicture.com/q/2cOaJ-2.png");
    background-size: 30px 33325px;
    background-position: 0px 11px;
    background-attachment: local;
    background-repeat: no-repeat;
    padding-left: 35px;
    padding-top: 10px;
    border-color:#ccc;
    font-size: 15px;
    display: block;
    margin: 0px;
    line-height: 1.5;
    width: 400px;
    height: 225px
  }
  .TextareaWrapper
  {
    display: inline-block;
    background-image: repeating-linear-gradient(to bottom, #ffffff, #f0f0f0 50%);
    background-attachment: local;
    background-size: 100% 45px;
    background-position: left 10px;
  }
</style>
<script>

</script>

Also, here are some URLs that I used:

Numbered and separated rows in a textarea

Repeating Linear Gradient Tutorial

Solution

  • Because the element you are scrolling is textarea, not .TextareaWrapper, so the background-attachment: local can not apply the scrolling for its children.

    You may combine these two background images into one background property with comma separated shorthands, and you don't even need the TextareaWrapper anymore.

    background: url("https://www.linkpicture.com/q/2cOaJ-2.png") 0px 11px/30px 33325px local no-repeat, repeating-linear-gradient(to bottom, #ffffff, #f0f0f0 50%) left 10px/100% 45px local;

    Those two backgrounds will be merged into one image to share the same scrolling position:

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div class="TextareaWrapper"><textarea id="Text" cols="1500"></textarea></div>
  </body>
</html>
<style>
  #Text
  {
    background: url("https://www.linkpicture.com/q/2cOaJ-2.png") 0px 11px/30px 33325px local no-repeat, repeating-linear-gradient(to bottom, #ffffff, #f0f0f0 50%) left 10px/100% 45px local;
    padding-left: 35px;
    padding-top: 10px;
    border-color:#ccc;
    font-size: 15px;
    display: block;
    margin: 0px;
    line-height: 1.5;
    width: 400px;
    height: 225px
  }
</style>
<script>

</script>