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:
Because the element you are scrolling is
textarea, not.TextareaWrapper, so thebackground-attachment: localcan not apply the scrolling for its children.You may combine these two background images into one
backgroundproperty with comma separated shorthands, and you don't even need theTextareaWrapperanymore.Those two backgrounds will be merged into one image to share the same scrolling position: