Question 325722 in CSS Question posted in
Some basic documentation can be found here.

Css – 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?

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Use lh (line height) units for your linear gradient, and background-attachment: local to make the background scroll with the text.

    body {
  margin: 1em;
  background: #eee;
}

textarea {
  width: 100%;
  height: 35vh;
  background: repeating-linear-gradient(white, white calc(1lh - 1px), #ccc calc(1lh - 1px), #ccc 1lh);
  background-attachment: local;
  padding: 0 0.25em;
  box-sizing: border-box;
  line-height: 1.25em;
  margin-bottom: 1rem;
  border: 2px solid #d70000;
}

.ta1 {
  font-size: 1.5em;
}
.ta2 {
  font-size: 2em;
}
    <textarea class="ta1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.</textarea>

<textarea class="ta2">Cras volutpat velit non mi sagittis condimentum. Cras tempor aliquet turpis sed pretium. Nunc aliquet sodales turpis quis ultrices. Duis auctor accumsan enim, quis maximus ex malesuada a. Donec a felis ut erat tempus euismod non vel neque. Proin lectus massa, sagittis at imperdiet nec, consequat ut neque. Sed vel placerat neque, vel varius urna. Vivamus interdum euismod urna a accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</textarea>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search