Textarea with alternate rows and line numbers

Question

I'm trying to draw a textarea with alternate rows and line numbers. A very simple solution to have line numbers is the following - see here for more details.

textarea {
  background: url(http://i.imgur.com/2cOaJ.png);
  background-attachment: local;
  background-repeat: no-repeat;
  padding-left: 35px;
  padding-top: 10px;
  border-color: #ccc;
}

<textarea rows="10" cols="40"></textarea>

While to have a textarea with alternate rows is just a simple as

textarea {
  background-image: linear-gradient(#F1F1F1 50%, #F9F9F9 50%);
  background-size: 100% 4rem;
  border: 1px solid #CCC;
  width: 100%;
  height: 400px;
  line-height: 2rem;
  margin: 0 auto;
  padding: 4px 8px;
}

<textarea rows="10" cols="40"></textarea>

Both solutions works ok, but combining them it's tricky since both makes use of the background to hack the line numbers and the alternate rows background.

Answer 1

You could combine them by wrapping your textarea in a div then assign the stripped background styles to that wrapping div, so the 2 backgrounds are like layered.

textarea {
  background: url(http://i.imgur.com/2cOaJ.png);
  background-attachment: local;
  background-repeat: no-repeat;
  padding-left: 35px;
  padding-top: 10px;
  border-color: #ccc;

  font-size: 13px;
  line-height: 16px;
}

.textarea-wrapper {
  display: inline-block;
  background-image: linear-gradient(#F1F1F1 50%, #F9F9F9 50%);
  background-size: 100% 32px;
  background-position: left 10px;
}

<div class="textarea-wrapper">
  <textarea rows="10" cols="40"></textarea>
</div>

The wrapping div I set to display: inline-block so it wraps the textarea like an inline element and I positioned the background gradient 10px from the top to account for you padding-top.

You may have to play with the background size of the gradient to get it to properly match the line-height of the textarea.

UPDATE To @DavidThomas's point, to help line up your text with the alternating gradient the background-size height value should be 2 times the line-height of the textarea (see updated snippet). But the harder thing is to make it line up with the image numbers.

Answer 2

You could use multiple backgrounds for the same element.

CSS allows you to add multiple background images for an element, through the background-image property.

In you case:

textarea {
  width: 100%;
  min-height: 100px;
  background: url(http://i.imgur.com/2cOaJ.png) top -12px left / auto no-repeat, 
              linear-gradient(#F1F1F1 50%, #F9F9F9 50%) top left / 100% 32px;
  border: 1px solid #CCC;
  box-sizing: border-box;
  padding: 0 0 0 30px;
  resize: vertical;
  line-height: 16px;
  font-size: 13px;
}

body {
  margin: 0;
}

<textarea rows="10" cols="40"></textarea>