cssrepeating-linear-gradient

How to make repeating-linear-gradient fit font-size?

I'm a noob in CSS, sorry if it's a simple thing.

I want to create a striped background for a textarea element (to make it look like a notepad). This can be achieved with the following CSS background rule:

textarea {
  width: 100%;
  height: 300px;
  background: repeating-linear-gradient(white, white 0.9rem, black 0.9rem, black 1rem);
}
<textarea><textarea>

The only problem is that, as can be seen above, as more lines are typed into the textarea, the stripes get out of sync and start to move upwards in relation to the text.

Question: How can I make the repeated stripes always fit perfectly with the font-size?

Solution

  • Use 1lh to get the height of one line

    textarea {
  width: 100%;
  height: 300px;
  padding: 0; /* there is a default padding */
  background: repeating-linear-gradient(#0000 0 calc(1lh - 1px), #000 0 1lh);
  /* line-height: 1.5; use this to increase the height of the line */
}
    <textarea><textarea>